Transform scale() 用于带边框的元素时的 Safari 错误

Question

当CSS转换scale()函数用于有边框的元素时，它在Safari上似乎有一个错误。

我正在尝试使用 Transform:scale() 函数在鼠标上缩放图像，但如果图像有边框，则缩放时会出现像素化。以下是应用了相同 CSS 规则（边框除外）的同一元素的示例：

代码示例： https: //jsfiddle.net/m6g4kw30/

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转换scale()函数用于有边框的元素时，它在Safari上似乎有一个错误。

你可以再说一遍！不幸的是，针对此（和类似）问题报告的错误可以追溯到很多年前，其中大多数引用了以下错误：

• https://bugs.webkit.org/show_bug.cgi?id=27684（于 07/2009 开放）

如果您没有注意到日期，那么这是一个 10 年前的错误，至今仍在给开发人员带来问题！哎呀。

基本上，问题归结为 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）先缩小，再放大

此处记录的另一个解决方法是将元素的初始大小设置为“放大”尺寸，然后缩小元素，直到准备好放大为止。这样，元素就会被光栅化为正确的尺寸。

CSS 方面，可能看起来像：

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

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

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

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

需要注意的一件事是，其他 CSS 属性可能需要使用此解决方法进行更新。例如，您会注意到在小提琴中我还需要更新border从1px到5px以补偿缩小。

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