最近我在 Webkit 中遇到了一个渲染问题，我怀疑这是 Webkit 引擎的错误。但我没有足够的信心这么说。所以我想在这里问一下，看看你的想法。
用纯文本描述这个案例对我来说有点困难，所以我在这里准备了一个片段：http: //jsfiddle.net/2eQXa/1/
首先，您可以看到带有红色边框的黄色背景。这不是 <body> 标签的背景，而是一个 ID 为“backdrop”的 <div>，它具有 100% 的宽度和高度。默认情况下，它链接到“backdrop-no-problem”类。还有一个带有一些图像的水平列表。该列表被绿色边框包围。在列表中，有一些用红色虚线边框包裹的 Wikipedia 徽标。
我使用以下 3 台设备测试了该页面： 1. Windows 7 上的 Chrome 21 2. 第一代 iPad 上的移动 safari（运行 iOS4，我将其称为 iPad1） 3. “新” iPad 上的移动 safari（运行 iOS5 , 我称之为 iPad3)
尝试单击“右”或“左”滚动列表。非常好。
要重现我的问题，首先单击“问题 #1”。这会将背景 div 从“位置：绝对”更改为“位置：固定”。然后单击“问题 #2”。这将添加“-webkit-backface-visibility: hidden;” 到元素（添加此样式的原因是为了确保 iPad 上的动画流畅）。
现在单击“左/右”滚动列表。您应该在所有三个浏览器中看到一个奇怪的行为：绿色 div 正确且平滑地滚动，但不是它的子元素。子元素只是与滚动父元素的位置“不同步”。运动不仅看起来迟钝，有时甚至卡住了。当滚动动画结束时，子元素会停在错误的位置。您必须将鼠标移到图片上（或在平板电脑上点击）才能触发更新，以便在正确的位置重新绘制元素。甚至 Chrome 显示出这种怪异让我觉得这是一个 Webkit 问题。
iPad3 的情况变得更糟了。在 iPad3 中你不需要添加“-webkit-backface-visibility: hidden;” （问题＃2）看到这种奇怪的行为。只需添加“位置：固定”（问题＃1）就可以了。奇怪的是，当您在 jsFiddle 中查看代码段时，这不会发生。如果您有兴趣，我已将源代码放在 pastebin 的单个文件中：
在写这个问题时，我看到了很多关于背面可见性的问题。我检查了一些，但没有一个符合我的问题。
欢迎提出想法或建议。谢谢！
（帖子已更新以修复许多错别字）