Tag: translate3d

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 2：