html - 图像在滑过它们时似乎“剪切”

Question

在 ipad 2（以及 ipad 3 上）上查看我的一个网站时，我遇到了一些奇怪的行为。

该网站是一个非常高的信息图，需要用户滚动/滑动浏览。所有图像都是imgdiv/spans/paragraphs 上的标签或背景，并且是绝对定位的。当我滑过它们时，我的一些图像似乎发生了剪切。

这是一个动画 gif，显示了我所看到的（不要盯着它看太久，它可能会催眠）：

图像实际上应该如下所示：

我的示例中的图像不是特别大。它只是一个 110kb 的 24 位 png。

有谁知道这可能是什么原因造成的？

Answer 1

只是一个疯狂的猜测，但您可以尝试通过将以下样式应用于包含图像的元素来强制 Safari 使用硬件加速：

.forceAccel > * { -webkit-transform: translate3d(0,0,0); }

只要我已经测试过，它通常可以解决闪烁的问题。