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

Question

我们正在为 iPad 和 iPhone 开发 HTML5 + CSS3 应用程序。 该应用程序在 iPad 和 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（第二代）、iPhone 3gs 和 iPhone 4 上运行良好，但在 iPad 2 上进行测试时，我们开始看到这种像素化的屏幕。最奇怪的部分是，3D 加速内容是唯一被像素化的部分。我附上了两张屏幕截图，一张来自 iPad，另一张来自 iPad2。你可以明白我的意思（它们是在同一天的不同时间拍摄的，所以内容不同，对此感到抱歉）。

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

另外，html内容中有这样一行：

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

We are opening the hardwareacceleration through CSS, and the main slidering objects has this property :

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

For flickerproofing, images are not inside any dom object that has a background color, and has this property ：

-webkit-backface-visibility: hidden;

为了在某些情况下进行更多闪烁防护，我们使用了此属性（但屏幕捕获中的像素化内容没有分配此属性）：

-webkit-perspective: 0;

该应用程序目前没有“apple-touch-startup-image”，因此我们的第一个以为是这样ios 的启动捕获有点混乱。但事实证明这不是问题，因为通过 Wi-Fi 下载内容后，像素化保持不变。

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

我试图提供尽可能多的信息，以下是我承诺的屏幕截图：

iPad :

iPad 2 :

Answer 1

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

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