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

我们正在为iPad和iPhone开发HTML5 + CSS3应用程序。 该应用程序在iPad和所有iPhone上运行良好,但是,iPad 2在启动时显示html dom对象,并且保持这种状态,有时总是有时停留一会儿。

应用程序是专为触摸和手势。 我们使用translate3D进行滚动对象的硬件加速。 我们也使用jQuery(v1.7),但我们devise的滚动是纯粹的JavaScript,没有框架。 jQuery主要用于查找/添加/删除dom对象和ajax。 除jQuery之外,其他所有东西都是内部编写的,包括我们正在使用的jQuery插件。

正如我所说,animation是通过translate3D来实现的。 对于滑动效果,我们正在改变-webkit转换的x或y轴值,并且当接收到touchend事件时,通过javascript,-webkit-transition和translate3D实现动量animation。 在编写应用程序时,苹果的iOS Safari文档被高度用作指南。

即使这款应用在iPad,iPod Touch(第二代),iPhone 3gs和iPhone 4上运行良好,但在iPad 2上进行testing时,我们却开始看到这个像素化的屏幕。 最奇怪的部分是,3D加速内容是获得像素化的唯一部分。 我附上了两个截图,一个来自iPad,另一个来自iPad2。 你可以看到我的意思(他们是在同一天的不同时间,所以内容是不同的,对此感到抱歉)。

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

另外,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使得不知所措。 但事实certificate,这不是问题,因为在通过wi-fi下载内容之后,像素化保持不变。

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

我尽可能地提供了尽可能多的信息,下面是我所做的截图:

iPad:

iPad屏幕截图,主屏幕是正常的

iPad 2:

iPad 2的屏幕截图,正如你所看到的主屏幕是严重pixellated

尝试删除转换,并立即通过超时重新应用:

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