在 Mobile Safari 中放大时图像模糊答案

【问题标题】：Image is blurry when upscaling in Mobile Safari在 Mobile Safari 中放大时图像模糊
【发布时间】：2020-01-17 01:06:28
【问题描述】：

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

我已经对这个问题进行了相当多的调试，发现罪魁祸首是我页面中一个不相关的 div，它设置了translate3d(0,0,0)。据我了解，这是一个触发 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 之外，还有其他方法可以解决此问题吗？我认为我不能这样做，因为它可能会被网页中的某些其他功能使用。

【问题讨论】：

标签： css mobile-safari css-transforms

【解决方案1】：

我找不到可行的 hack，但我使用的解决方法是简单地创建一个更大的 HTMLImageElement 并最初将其缩小。然后按比例放大它看起来不会模糊。这使我的代码稍微复杂一些，但运行良好。

【讨论】：

【解决方案2】：

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

hackfix 是为元素设置背景。

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

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

【讨论】：

感谢您的回答和解释。但是，黑客似乎不起作用。我刚刚使用这个 codepen 在我的 iPhone 上测试了它：codepen.io/mcohnen/pen/JjPBzmp 我尝试将 background: transparent 添加到带有转换的 div 和受它影响的 img。
嗯，是的，你是对的。当我实时编辑代码时，我的 iPhone 似乎再次呈现了它。如果这不起作用，那一定是您首先想到的：比例转换搞砸了。您是否有任何理由需要将其应用于img 标签？如果您在父 div 上设置宽度和高度，它似乎可以工作。
这是我想要放大的图像。我尝试将其包装在 div 中，该 div 将设置宽度/高度并对其应用变换，但我仍然得到相同的行为：codepen.io/mcohnen/pen/PoYBLvM 我能想到的唯一解决方案是制作 img 元素更大并应用初始scaleDown 效果。这使我的代码变得更加混乱，但这是我目前正在考虑的解决方法。