ios - iPad 2 Safari 显示像素化的 html 文本和图像

Question

我们正在为 iPad 和 iPhone 开发 HTML5 + CSS3 应用程序。 该应用程序在 iPad 和所有 iPhone 上运行良好，但是，iPad 2 在启动时显示像素化的 html dom 对象，并保持这种状态，有时总是这样，有时只是片刻。

应用专为触摸和手势而设计。我们使用 translate3D 对滚动对象进行硬件加速。我们也在使用 jQuery (v1.7)，但是我们设计的滚动器是纯 javascript，没有框架。 jQuery 主要用于查找/添加/删除 dom 对象和 ajax。除了 jQuery，其他一切都是内部编写的，包括我们正在使用的 jQuery 插件。

正如我所说，动画是通过 translate3D 实现的。对于滑动效果，我们正在改变 -webkit-transform 的 x 或 y 轴值，当接收到 touchend 事件时，使用 javascript、-webkit-transition 和 translate3D 实现动量动画。在编写应用程序时，Apple 的 iOS Safari 文档被广泛用作指南。

尽管该应用程序在 iPad、iPod Touch(第 2 代)、iPhone 3gs 和 iPhone 4 上运行良好，但在 iPad 2 上进行测试时，我们开始看到这个像素化屏幕。最奇怪的是，3d 加速内容是唯一像素化的部分。我附上了两张截图，一张来自iPad，另一张来自iPad2。你可以明白我的意思(它们是在同一天的不同时间拍摄的，所以内容不同，请见谅)。

主要内容(带有图像的框)可以通过触摸事件上下滑动。在 iPad2 上，只有这部分是像素化的。滑动时，像素化大部分时间保持不变，但在某些测试中，它会在几秒钟后重置。

此外，html 内容中有这一行:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

我们是通过CSS启动硬件加速的，主要的滑动对象都有这个属性:

-webkit-transform: translate3d(0,0,0);

为了防闪烁，图像不在任何具有背景颜色且具有此属性的 dom 对象内:

-webkit-backface-visibility: hidden;

为了在某些情况下进行更多的闪烁校对，我们使用了这个属性(但屏幕截图中的像素化内容没有分配这个属性):

-webkit-perspective: 0;

该应用程序目前没有“apple-touch-startup-image”，所以我们的第一个想法是 ios 制作的启动捕获在某种程度上是困惑的。但事实证明这不是问题，因为通过 wi-fi 下载内容后，像素化保持不变。

如果有人遇到过这个或类似的问题并且能够解决它，请回答，因为我们没有其他想法了。

我尽力提供了尽可能多的信息，以下是我 promise 的屏幕截图:

iPad :

iPad 2:

Answer 1

尝试删除转换并在超时后立即重新应用它:

$("#sliding").css("-webkit-transform: none");
setTimeout(
  $("#sliding").css("-webkit-transform", "translate3d(0,0,0)")
, 0);