html - 在带边框的元素上使用时转换 scale() Safari 错误

Question

CSS transform 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 transform scale() function appears to have a bug on Safari when it's used on elements with a border.

你再说一遍!不幸的是，针对此(和类似)问题报告的错误可以追溯到 许多 年，大多数都引用了以下错误:

• 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) 先缩小，再放大

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

明智的 CSS，可能看起来像:

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

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

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

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

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

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