如何解决transform scale后图像模糊的问题

Question

当我将scale(1.1);应用于某个元素的悬停状态时，图像会变得模糊。如何修复此错误？

示例

- Viktor Zahov

---

可能是[-webkit-transform: scale / blurry images]的重复问题。(https://dev59.com/A18d5IYBdhLWcg3wNAKy) - Gajus

Answer 1

试一下这个，对我来说效果很好！

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

- dimitar

---

虽然Chrome 77会自动重新锐化缩放后的图像，但Safari 13.0.1不会，并且提供的解决方案也无法使Safari重新锐化图像。我使用的图像是SVG矢量图。这只是Safari的一个问题吧。 - Daniel W.

据我所知，如果您扩大外部容器（大于1）并缩小图像（小于1），则可以正常工作。例如：https://jsfiddle.net/5mf7naxh/4/ - axel freudiger

问题出现在Firefox 100中 - 将-webkit-backface-visibility: hidden添加到具有transform：scale（n.n）属性的元素中解决了这个问题。 - Dale Anderson

Answer 2

简而言之，transform: scale 实际上是在缩放原始图像，因为您让浏览器的渲染引擎自行决定应该放置什么，所以您得到了模糊的图像。尝试使用：

img {
transform: scale(.9)    
}

img:hover {
transform: scale(1)
}

Aaron Sibler在这篇文章中回答了我的问题。

我也遇到了这个难题。在你的例子中，你需要将img向下变换，例如“transform: scale(0.7)”，然后在悬停时将其放大到原始尺寸，例如“transform: scale(1.0)”。

缩放值是相对于原始图像尺寸而不是屏幕上的当前尺寸，因此缩放比例为1始终等于原始图像的尺寸。

我在这里使用了这个技术;

http://meetaaronsilber.com/experiments/css3imgpop/index.html

- axecopfire

---

这对我没有起作用，因为它使图像最初比需要的尺寸小。 - Paul

Answer 3

我已经阅读了所有的评论，并尝试了人们提出的所有解决方案。但除了rotate（360deg）之外，没有什么真正好的方法。除此之外，其他方法会在图像上产生卡顿或者最初变得太模糊。但是如果不隐藏它，旋转看起来很奇怪。所以我决定旋转0.0000001度，这样就可以了！图像只在过渡期间模糊，但在结束和开始时它是清晰的。也许我的图片太小了。

因此，我的当前解决方案是将此部分添加到CSS中（而无需其他内容）：

    img {
      transform: rotate(0.00000000001deg);
    }

- Kades

Answer 4

我曾经遇到过SVG缩放和模糊图像的问题。我将背景图像放大到4.5倍，但是图像在放大时变得非常模糊。

后来我发现可以先进行缩小操作transform: scale(0.7)，然后再进行放大操作transform: scale(1.0)。但是这对于我的动画来说意味着需要进行大量的重构。因为我的动画非常复杂，包含多个缩放和变换等操作。

最终，我选择保持原样，并添加了一个伪缩放宽度。浏览器似乎会重新渲染每一帧，但由于宽度实际上并没有改变，因此您仍然可以使用transform: scale(x.x)进行缩放，并获得非常清晰的图像。

也许有人可以证实这一点。以下是我的代码。在我的情况下，图像宽度为86px，放大了4.5倍。

<div class="overall-scale">
 <div class="image-scale"></div>
</div>

@keyframes overall-scale {
0% {
    transform: scale(1);
}

100% {
    transform: scale(4.5);
}
}

@keyframes image-scale {
0% {
    width: 86px;
}

100% {
    width: 86px;
}
}

希望这可以帮到你，我的解释是否清晰易懂。

如果这对你没有用，请留言评论。

- Mikaelik

---

其他提到的方法对我没有用。也许有人遇到了同样的问题。 :) - Mikaelik