在带有边框的元素上使用时会转换scale()Safari bug [英] Transform scale() Safari bug when used on elements with border

问题描述

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

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

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

  div {文本对齐:居中；}img {高度:100px；-webkit-transition:所有.3s缓解；-moz-transition:所有.3缓解；-o-transition:所有.3都缓解；-ms-transition:所有.3s缓解；过渡:所有.3s缓解；边框:1px实线#000；边距:20px;}img.noborder {边界:无；}img:悬停{-webkit-backface-visibility:隐藏；背面可见性:隐藏；-webkit-transform:translationZ(0)scale(5);-moz-transform:scale(5);-ms-transform:scale(5);-o-transform:translationZ(0)scale(5);转换: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>  

解决方案

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

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

• https://bugs.webkit.org/show_bug.cgi?id=27684(于2009年7月开放)

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

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

关于解决方法/修复程序?您可以通过以下几种方式解决"此问题:

1)强制重新渲染

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

  img {轮廓:1px实线#000；边界:无；}img:悬停{大纲:无；边框:1px实线#000；} 

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

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

在此处中记录的另一种解决方法是，将元素的初始大小设置为已缩放尺寸"，然后按比例缩小元素，直到可以按比例放大为止.这样，该元素将栅格化为正确的尺寸.

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

  img {-webkit-transform:translationZ(0)scale(0.2);高度:250像素；}img:悬停{-webkit-transform:translationZ(0)scale(1);} 

在上面，我们已经将 img 的 initial 大小设置为 250px (这是基于您原始的CSS，图片为 50px ，然后放大为 5 ).然后，我们将图像按 0.2 缩小比例，结果为 50px .悬停时，我们通过设置 scale(1)将其缩放回 250px .

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

要注意的一件事是，此解决方法可能需要更新其他CSS属性.例如，您会在小提琴中注意到，我还需要将 border 从 1px 更新为 5px ，以补偿缩小的情况./p>

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

CSS transform scale() function appears to have a bug on Safari when it's used on elements with a border.

I'm trying to zoom an image on mouse over using transform: scale() function but if the image has a border then it gets pixelated when scaled. Here is a sample of the same element with the same CSS rules applied (except the border):

Code example: 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>

解决方案

CSS transform scale() function appears to have a bug on Safari when it's used on elements with a border.

You can say that again! Unfortunately, the reported bug(s) for this (and similar) issues go back many years, with the following bug referenced in most:

• https://bugs.webkit.org/show_bug.cgi?id=27684 (Opened in 07/2009)

If you didn't catch the date, it's a 10 year old bug that's still causing developers issues today! YIKES.

Basically, the issue comes down to Safari rasterizing the layer. On transform/scale, it resizes the layer, however it does not re-render the rasterized layer. In your use-case, the rasterized image is scaled up, but the text/image is blurry.

As for a workaround/fix? There are a couple ways you can "address" this:

1) Force a re-render

A quick/easy fix is to force Safari to re-render your layer when you transform. One way this can be achieved is by applying a CSS property which you then change after transforming (some people have success changing a background-color, for example). For your specific use case, I had luck with the following combination:

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

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

By toggling those specific values, I was able to force Safari to re-render the rasterized layer, thus rendering a sharp image (similar to the non-border example). Here's a JSFiddle with the full code example: https://jsfiddle.net/gc56brfh/

2) Scale down, then up

Another workaround, documented here, is to set the element's initial size to the "scaled up" dimensions, and then scale down the element until you're ready to scale it up. That way, the element is rasterized to the correct dimensions.

CSS wise, that may look like:

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

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

In the above, we've set the initial size of the img to 250px (this is based on your original css, with images being 50px and then scaled up 5). We then scale down the image by 0.2, resulting in 50px. On hover, we then scale back up to 250px by setting scale(1).

Here's an updated JSFiddle: https://jsfiddle.net/df2zqgnx/

One thing to note is that other CSS properties might need to be updated with this workaround. For example, you'll notice in the fiddle I also needed to update the border from 1px to 5px to compensate for the scaling down.

Anyway, hope this was helpful and one of the solutions works for you!

这篇关于在带有边框的元素上使用时会转换scale()Safari bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！