Question

在带有边框的元素上使用CSS transform scale（）函数时，Safari上似乎有一个错误。

我正在尝试使用transform：scale（）函数在鼠标上缩放图像，但是如果图像带有边框，则在缩放时会像素化。这是一个应用了相同CSS规则的相同元素的示例（边框除外）：

div {
  text-align: center;
}

img {
  height: 100px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  border: 1px solid #000;
  margin: 20px;
}

img.noborder {
  border: none;
}

img:hover {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(5);
  -moz-transform: scale(5);
  -ms-transform: scale(5);
  -o-transform: translateZ(0) scale(5);
  transform: translateZ(0) scale(5);
}

<div>
  <img src="https://via.placeholder.com/1000.png" alt="">
  <img src="https://via.placeholder.com/1000.png" class="noborder" alt="">
</div>

Answer 1

在带有边框的元素上使用CSS transform scale（）函数时，Safari上似乎有一个错误。

您可以再说一次！不幸的是，所报告的有关此（和类似问题）的错误可以追溯到很多年，其中大多数引用了以下错误：

https://bugs.webkit.org/show_bug.cgi?id=27684（于2009年7月开业）

如果您没有赶上日期，那么这是一个有10年历史的错误，今天它仍然会引起开发人员问题！ YIKES 。

基本上，问题出在Safari栅格化图层上。在transform/scale上，它会调整图层的大小，但是不会重新渲染栅格化的图层。在您的用例中，光栅化的图像放大了，但是文本/图像却模糊了。

关于解决方法/修复程序？您可以通过以下几种方式“解决”此问题：

1）强制重新渲染

一个快速/简便的修复方法是强制Safari在转换时重新渲染图层。可以实现此目的的一种方法是应用CSS属性，然后在转换后进行更改（例如，某些人成功更改了背景颜色）。对于您的特定用例，我很高兴使用以下组合：

img {
    outline: 1px solid #000;
    border: none;
}

img:hover {
    outline: none;
    border: 1px solid #000;
}

通过切换这些特定值，我能够强制Safari重新渲染栅格化的图层，从而渲染出清晰的图像（类似于非边界示例）。这是带有完整代码示例的JSFiddle：https://jsfiddle.net/gc56brfh/

2）按比例缩小，然后按比例放大

记录在here中的另一种解决方法是将元素的初始大小设置为“按比例放大”尺寸，然后按比例缩小元素，直到准备好按比例放大为止。这样，该元素将栅格化为正确的尺寸。

明智的CSS，看起来可能像这样：

img {
    -webkit-transform: translateZ(0) scale(0.2);
    height: 250px;
}

img:hover {
    -webkit-transform: translateZ(0) scale(1);
}

在上面，我们将initial的{{1}}大小设置为img（这是基于您原始的CSS，图像为250px，然后放大50px）。然后，我们将图像缩小5，得到0.2。悬停时，我们可以通过设置50px来放大到250px。

这是更新的JSFiddle：https://jsfiddle.net/df2zqgnx/

要注意的一件事是，此解决方法可能需要更新其他CSS属性。例如，您会在小提琴中注意到，我还需要将scale(1)从border更新为1px以补偿缩小的问题。

无论如何，希望这对您有所帮助，并且其中一种解决方案对您有用！

在带有边框的元素上使用时，转换scale（）Safari错误

1 个答案: