使用transform: scale会导致图像模糊。

Question

在我们的目录视图（在线商店）中，我们使用JavaScript获取产品的不同视图，并使用CSS将图像缩小。3行/4或5个为一组。 默认视图是4：

-webkit-transform: scale(0.83);
-moz-transform: scale(0.83);
-ms-transform: scale(0.83);
-o-transform: scale(0.83);
transform: scale(0.83);

所有功能正常，但在Safari浏览器中，图片看起来非常模糊。有没有办法提高Safari的渲染质量？

- grindking

Answer 1

如果在Safari中重置模糊滤镜，它就能正常工作：

-webkit-filter: blur(0px); 

所有浏览器的示例：

filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

希望它有所帮助

- spinsch

---

为什么要包含其他前缀来解决 Safari 的问题？ - Zach Saucier

对于Chrome（我相信Safari也是如此），只有-webkit-filter：blur（0）是有用的。 - vcarel

顺便说一下，我必须大声地感谢你。你救了我的一天 :-) - vcarel

多年来出现了许多模糊转换的技巧。我们已经快到2016年了，这还没有结束吗？！...这个方法解决了我的问题，其他方法都没用过（出现在Chrome浏览器上的OSX系统中）。 - Marian

Chrome 77会自动对缩放后的图像进行再次锐化，但Safari 13.0.1则不会，并且提供的解决方案也无法使Safari对图像进行再次锐化。 - Daniel W.

Answer 2

对于那些没有觉得被采纳的答案有用的人，对父容器添加这个功能对我有效：

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);

- Daniel_Knights

---

这最终对我有所帮助，特别是将其放在父级上。谢谢！ - Ryan Biwer

在我的情况下，我正在缩放图像的父容器，解决模糊问题的方法是将此样式添加到 img 本身。谢谢！ - AnnaFractuous