Phonegap 图像模糊，缩放后不会重绘该图像答案

【问题标题】：Phonegap image is blurry and does not redraw that image after zoomPhonegap 图像模糊，缩放后不会重绘该图像
【发布时间】：2014-10-21 22:34:22
【问题描述】：

我在这里遇到了一个非常棘手的问题，我一直试图为此找到解决方案，但失败了。也许这是 Phonegap 限制或操作系统浏览器（phonegap 用作 web 视图）限制。我不确定..

好的，这是我的问题..

我的图像分辨率为 4000x3000，并且我的 Phonegap 应用具有使用 css3 transform:scale() 缩放 html 图像或 html 文本的功能

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

现在在 Phonegap 端，默认情况下我通过标签显示图像并应用 css3 transform:scale(0.5) 以使图像更小以适应在移动设备中，现在当我双击图像时，我将对其进行缩放并应用 css3 transform:scale(2.5)

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

还有一个重要提示，使用 JellyBean OS 版本（Android）的三星 S3 不会发生重绘，而在 KitKat OS 版本（Android）的小米手机中，会发生重绘。我也在 iOS7 中使用 ipodtouch5 发现了类似的问题

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

有人遇到过这个问题吗？

希望任何人都有解决方案。

希望大家帮忙

谢谢

【问题讨论】：

【解决方案1】：

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

这适用于我在 android 和 iOS 上（WKWebView 插件除外）。

【讨论】：