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(第二代),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);