7

我们正在为 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（第 2 代）、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：

iPad 2 屏幕截图，如您所见，主屏幕像素化严重

4

1 回答 1

2

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

$("#sliding").css("-webkit-transform: none");
setTimeout(
  $("#sliding").css("-webkit-transform", "translate3d(0,0,0)")
, 0);
于 2011-12-16T19:50:16.263 回答