css translateZ使元素模糊

这是我的问题（codepen，因为stackoverflow的iframe会以某种方式影响渲染）：

使用

transform:translateZ

和

perspective

时，内部元素的边缘和文本变得模糊。它在不同的浏览器中的工作方式也非常不同。如果它也取决于屏幕或操作系统，以下是一些带有说明的屏幕截图：

在Google Chrome中，转换：缩放（2）很好。文本和内部元素变得模糊，这取决于具有

透视图的元素的宽度，它遵循非常奇怪的逻辑，当我将
宽度设置为847px或更高时，它会断开，较低的看起来正常：

在Mozilla Firefox中，如果使用
透视
/
平移
组合，则文本会变得模糊，内部元素很好，
变换：缩放（2）
也可以<代码>宽度
似乎不会影响任何内容：

在狩猎中，无论我做什么，一切都是模糊的：

为什么它是模糊的，我如何使它正确？对所有内容使用
transform:scale（2）
不是一个可行的选择。我是否应该遵循一些规则来帮助浏览器使用文本渲染3D变换

支持Safari不是一个优先事项，但仍然很好
您是否尝试将自定义webkit添加到浏览器中？
我的回答可能晚了，但我最近在为网站实施视差设计时遇到了相同的行为。
这是一个与Safari中作为位图呈现的文本相关的问题，这些位图不会在transform:scale（x）上重新呈现；但却被放大了。
在某些情况下，可以手动触发文本的重新呈现，但是这非常棘手，并且没有保证能够正常工作。
杰克在这篇文章中提供了一个更全面的答案：
在任何浏览器中似乎都不会影响任何内容尝试在调整宽度和高度值时使用相同的测量单位。示例<代码>宽度：50vh和<代码>高度：5vh在上面的代码笔中，有一个示例使用像素表示宽度和高度。还是没用，几天前我无意中删除了代码笔，用新链接编辑了我的帖子。问题不在于比例，而在于3d变换。我还没有找到一个好的解决办法。在我的实际用例中，它应该动态地变大/变小。当我在默认情况下将所有内容都放大并缩小时，我遇到了相反的问题，抗锯齿不起作用，在具有对比边框的元素上也非常明显：，屏幕截图：。我想我会把3d部分改写成三个js