Phonegap的图片模糊，缩放后不重新绘制。

Question

4

我这里有一个非常棘手的问题，我试图解决它已经很长时间了但一直失败。也许这是 Phonegap 的限制或者是操作系统浏览器（Phonegap 使用作为 webview）的限制。我不确定。

好的，这就是我的问题。

我有一个 4000x3000 的图像分辨率，并且我的 Phonegap 应用程序具有使用 CSS3 的 transform:scale() 功能来缩放 html 图像或 html 文本。

首先，在桌面网页浏览器上测试时，当我缩放高分辨率图像和 html 文本时，图像和文本在缩放后变得模糊。但是几毫秒后，桌面浏览器会重新绘制，使图像和文本更清晰。这当然是浏览器的默认行为。

现在在 Phonegap 方面，默认情况下，我通过 < img > 标记显示图像，并应用 css3 transform:scale(0.5) 将图像缩小以适应移动设备，现在当我双击图像时，我将放大它并应用 css3 transform:scale(2.5)

Phonegap 中的问题在于，当我放大图像时，Phonegap 不会重新绘制图像，这使得图像变得模糊。对我来说，模糊的图像很重要，因为图像中有文本，当缩放时文本不清晰无法阅读。

并且重要的一点是，使用带有 JellyBean 操作系统版本（Android）的 Samsung S3 时不会发生重新绘制，而在带有 KitKat 操作系统版本（Android）的 Xiaomi 手机中发生了重新绘制。我还在使用 iPodTouch5 的 iOS7 中发现了类似的问题。

我不确定这是否可以通过代码解决，或者这是浏览器的限制。

是否有人遇到过这个问题？

希望有人能够提供解决方案。

期待大家的帮助

谢谢

- Bogz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gynekolog · Accepted Answer

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

这对我来说在安卓和iOS上都有效（除了WKWebView插件）。