在 Mobile Safari 中放大时图像模糊

Question

我正在 JS/CSS 中实现捏合缩放手势。为此，我将一个相当大的图像源放在一个小尺寸的 IMG 标签中，然后应用 CSS 比例变换使其变大。一切正常，但在 Mobile Safari 上，一旦我开始按比例放大，图像就会变得模糊。应该不是这种情况，因为图像的 src 足够大以支持此尺寸，但不知何故 Mobile Safari 将其显示为模糊。

我对这个问题进行了相当多的调试，发现罪魁祸首是我页面中设置 translate3d(0,0,0) 的不相关 div。据我了解，这是触发 GPU 硬件加速的 Hack。我相信它正在发生的是，由于 translate3d(0,0,0)，在渲染 <img/> 时应用了硬件加速，并且由于 <img> 尺寸小，所以它被绘制得很小并且比例之后应用。

为了更好地理解问题，我有这段代码，可在 in codepen here

HTML

<div>
  <div id="translate3d-div"/>
</div>

<img id="image" src="https://www.trackalytics.com/assets/thumbnails/lipsum.com.jpg"/>

CSS

#translate3d-div {
  /* If I remove this, the image is not blurry */
  transform: translate3d(0,0,0)
}

#image {
  width: 95px;
  height:76px;
  transform: scale(20);
}

这在 Mobile Safari 上显示图像模糊，但在 Android 中的 Chrome 上工作正常。

除了删除不相关的 translate3d 之外，还有其他方法可以解决此问题吗？我不认为我可以这样做，因为它可能会被网页中的其他一些功能使用。

Answer 1

这是因为当启用硬件加速时，WebKit 的渲染方式会发生变化（如 iPhone）。它显着提高了性能，但在没有真正的转换发生时应用 3DTransform 时会影响抗锯齿。

一个 hackfix 是为元素设置背景。

 #translate3d-div {
   transform: translate3d(0,0,0);
   background: transparent;
 }

来源：https://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit

Answer 2

我找不到适用于此的破解方法，但我使用的解决方法是简单地创建一个更大的 HTMLImageElement 并在最初缩小它。然后放大它看起来不会模糊。这使我的代码稍微复杂一些，但工作正常。

在 Mobile Safari 中放大时图像模糊

Image is blurry when upscaling in Mobile Safari

css

mobile-safari

css-transforms