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

Question

我正在iPad网络应用程序上显示包含多个全尺寸(768x1024)图像的视图.图像位于彼此相邻的独立div中.这些图像是预装的.

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

但是,当我在图像之间滑动时,渲染新图像并不完全正常 - 图像的右侧(最后~20%)闪烁.只有在第一次显示图像时才会发生这种情况,之后没有问题.

我已经尝试过的:

• 两个全尺寸图像(每个约200kb)和lo-res(每个~30kb)作为背景图像
• 像上面一样,但作为img元素
• 较小的缩略图图像拉伸为全尺寸背景大小:封面(性能非常糟糕)
• 单色图像.
• 通过在单个视图中缩小整数内容然后将其重新缩放为100%来一次显示整个内容

这些都不起作用.我也试过通过离线应用程序缓存提供图像,但是我没有这个问题在加载图像的地方有很多工作,但纯粹是作为渲染问题.

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

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

Answer 1

您可能需要将"-webkit-transform:translate3d(0,0,0)"添加到图像本身.