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

Question

我们正在为iPad和iPhone开发HTML5 + CSS3应用程序。 该应用程序在iPad和iPad上正常运行但是，所有的iPhone，iPad 2都会在启动时显示像素化的html dom对象，并且有时会保持这种状态，有时会持续一段时间。

App专为触控和手势而设计。我们使用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">

我们正在通过CSS开始硬件加速，主滑动对象具有以下属性：

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

对于闪烁校样，图像不在任何具有背景颜色的dom对象内，并具有以下属性：

-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);