问题描述
这是我的问题的重现（codepen，因为显然 stackoverflow 的 iframe 以某种方式影响渲染）：
https://codepen.io/Ironimus/pen/GRjxpXZ
使用 transform: translateZ 和 perspective 时，内部元素的边缘和文本变得模糊。它在不同的浏览器中的工作方式也大不相同。如果它也取决于屏幕或操作系统，以下是一些带有说明的屏幕截图：
在 Google Chrome 中 transform: scale(2) 很好。文本和内部元素变得模糊，具体取决于带有 perspective 的元素的宽度，并且遵循非常奇怪的逻辑，当我将 width 设置为 847px 或更高时，它会中断，较低看起来没问题：
在 Mozilla Firefox 中，如果使用 perspective/translateZ 组合，文本会变得模糊，内部元素很好，transform: scale(2) 也可以。 width 似乎没有任何影响：
在 Safari 中，无论我做什么，一切都很模糊：
为什么它完全模糊，我如何使它正确？对所有内容都使用 transform: scale(2) 不是一个可行的选择。是否有一些我应该遵循的规则来帮助浏览器使用文本正确渲染 3D 转换？
支持 Safari 不是优先事项，但还是不错的
解决方法
您是否尝试向浏览器添加自定义 -webkit？
,我可能迟到了这个答案，但我最近在为网站实施视差设计时遇到了同样的行为。 这是一个与在 Safari 中渲染为位图的文本相关的问题，这些文本不会在 transform: scale(x); 上重新渲染。而是被放大了。 在某些情况下可以手动触发文本的重新渲染，但是这非常挑剔，并且没有保证的方法可以使其工作。 Jack 在此线程中提供了更全面的答案： Transform scale() Safari bug when used on elements with border