在iPad网络应用程序上的全屏图像呈现

Question

我正在iPad网络应用程序上显示包含多个全尺寸（768x1024）图像的视图。图像位于彼此相邻的独立div中。这些图像已预先加载。

图像之间的转换是使用-webkit-transform：translate3d（）完成的，这在考虑性能时应该是最有效的方式。过渡是为整个身体元素完成的。但我不能说是通过复制滚动，平铺滚动还是完全重绘来执行渲染。

然而，当我在图像之间滑动时，渲染新图像并不完全正常 - 图像的右侧（最后~20％）闪烁。只有在第一次显示图像时才会发生这种情况，之后就没有问题了。

我已经尝试过：

• 两个全尺寸图像（每个~200kb）和lo-res（每个~30kb）作为背景图像
• 如上所述，但作为img元素
• 较小的缩略图图像以背景大小拉伸为全尺寸：封面（性能非常差）
• 单色图片。
• 通过在单个视图中缩小整个内容，然后将其重新缩放为100％
，一次显示整个内容

这些都不起作用。我也尝试通过离线应用程序缓存提供图像，但我不会在加载图像的情况下做很多事情，但纯粹是渲染问题。

我还检查了我是否具有可能影响性能的CSS属性（例如，过滤器，定位或溢出问题）。不应该有任何会导致惩罚的事情。

目前，只有工作解决方案才能完全没有图像，因为没有图像就没有渲染问题。并且完成转换后的显示图像。然而，这只是第二个（也是最后一个）解决方案。

Answer 1

您可能需要将“-webkit-transform：translate3d（0,0,0）”添加到图像本身。

Answer 2

谢谢，帕克。我有一个非常相似的设置，并在大约20％的图像中有确切的闪烁问题，这解决了它。本网站上有人建议将图像包装在div中，但就我所见，这没有任何区别（可能因为图像浮动时会自动成为块元素）。