使用CSS变换后模糊的文本：scale（）; 在Chrome中
似乎Google Chrome最近有一个更新，在进行transform: scale()后会导致模糊的文本transform: scale() 。 具体来说，我正在这样做：
@-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } }
如果您在Chrome中访问http://rourkery.com ，则应该在主文本区域中看到问题。 它并没有用来做到这一点，它似乎并没有影响其他的webkit浏览器（如Safari）。 还有一些关于人们遇到与3D变换类似的问题的其他post，但没有find像这样的2D变换的任何东西。
任何想法将不胜感激，谢谢！
我有这个问题很多次，似乎有2种方法来修复它（如下所示）。 您可以使用这些属性中的任何一个来修复渲染，或者同时使用这两个属性。
隐藏背面可见性可以修复问题，因为它将animation简化为对象的前面，而默认状态是正面和背面。
backface-visibility: hidden;
TranslateZ也可以工作，因为它是一种向硬件添加硬件加速的function。
transform: translateZ(0);
这两个属性都可以解决您遇到的问题，但有些人也喜欢添加
-webkit-font-smoothing: subpixel-antialiased;
以他们的animation来反对。 我发现它可以改变一个网页字体的渲染，但也可以自由地尝试这种方法。
代替
transform: scale(1.5);
运用
zoom : 150%;
修复了Chrome中的文字模糊问题。
桑德尔斯引导我回答。 除了filter: scale不存在，但是filter: blur 。
将下一个声明应用于显得模糊的元素（在我的情况下，它们是在一个变形的元素中）：
backface-visibility: hidden; -webkit-filter: blur(0);
它几乎完美的工作。 “ 几乎 ”是因为我正在使用一个转换，而在转换时，元素看起来并不完美，但是一旦转换完成，他们就会这样做。
我发现调整比例有一点帮助。
使用scale(1.048) (1.05)似乎可以更好地逼近整像素字体大小，从而减less亚像素模糊。
我也使用了translateZ(0) ，它似乎调整了Chrome在转换animation中的最后舍入步骤。 这对我的onhover使用是一个加号，因为它提高了速度，并减less了视觉噪音。 但是，对于一个onclick函数，我不会使用它，因为经过转换的字体看起来不够脆。
这必须是Chrome（版本56.0.2924.87）的一个错误，但下面修改了在控制台（'。0'）中更改CSS属性时的模糊。 我会报告。
filter: blur(.0px)
尝试使用zoom: 101%; 对于复杂的devise，当你不能使用缩放比例的组合。
为了改善模糊性，尤其是 在Chrome上，请尝试这样做：
transform: perspective(1px) translateZ(0); backface-visibility: hidden;
在我的情况下，下面的代码造成模糊的字体：
-webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
而只是添加缩放属性固定它给我。 玩变焦，下面为我工作：
zoom: 97%;
如果正在翻译的元素具有奇数个像素的高度，那么补充说明这个问题是很重要的。 因此，如果您可以控制元素的高度，将其设置为偶数就可以使内容变得清晰
对我来说，问题是我的元素使用transformStyle: preserve-3d 。 我意识到，这不是实际需要的应用程序，并删除它固定模糊。
以上都没有为我工作。 我有这个animationpopup：
@keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } }
在我的情况下，应用这个规则后，模糊的效果消失了： -webkit-perspective: 1000; 即使它在Chrome检查器中被标记为未使用。
我find了一个更好更干净的解决scheme：
.element{ transform:scale(0.5) transform-origin: 100% 0; }
要么
.element{ transform:scale(0.5) transform-origin: 0% 0; }
感谢这篇文章： 防止使用transform：scale进行模糊渲染
你可以使用CSS filter来解决这个问题。
.element { filter: blur(0); }
关于vendor-prefix，请自行完成。 -webkit-filter ， -ms-filter 。 细节在这里http://browser.colla.me/show/css_transformation_scale_cause_blurring
