css3 – 移动Webkit回流问题

我在移动版本的webkit中遇到了一个问题(特别是iOS 5.1.1上的Webkit 534.46,作为移动Safari,现在是Chrome for iOS),这在我看到的任何桌面浏览器上都没有发生. (即下面的演示应该在移动版本的webkit上查看.)

Here is a live example of the issue. CSS的核心是非常简单的.它在页面左侧定位一个字母索引：

#index {
    left:0; margin:0; padding:0; position:fixed; top:0; width:3em;
}

当元素固定在身体顶部的位置时,会发生此问题.完全能够进行交互,直到滚动更改,然后停止接受输入.如果我(手动)摇动滚动甚至一个像素,那么它将再次变为活动.该示例保持尽可能简单,并且不使用任何JavaScript.在真正的锤击之后,我发现这个元素似乎被认为是滚动的,但是在视觉上是固定的.换句话说,如果您点击“A”,那么尝试再次单击“A”,有时候您会得到第二次点击,但会进一步下降.这似乎是一个CSS回流问题给我.我知道移动webkit试图减少回流的数量.

Here is a live example of the workaround.

我可以使用JS强制整个文档的CSS回滚滚动(有一个油门,阻止它发生,直到滚动后100ms),这似乎解决了这个问题在简单的例子中.不幸的是,这并不能帮助这个问题的真实版本.

This is the code for the issue page and the workaround script.

我的问题是这里发生了什么,是否有一个我失踪的CSS解决方法？具体来说,我很好奇,如果任何CSS大师可以弄清楚布局情况是否阻止点击在固定元素上的正确位置？更好的理解可能有助于找到一个真正的修复.

编辑：我忘了提到该示例显式强制视窗到窗口的大小.所以用户无法放大/缩小,这意味着位置：fixed应该将元素固定在窗口的左侧.

更新(2012-09-20)：这似乎是在iOS 6的移动Safari(以及UIWebView)中修复.任何解决方法应该首先检查,以确保它在iOS<例如,使用CssUserAgent这样看起来像：

if (parseFloat(cssua.ua.ios) < 6) { /* ... */ }

解决方法

实际解决我的特殊问题的答案是一个解决方案的变体 in one of @Paul Sweatte’s links：

本质上,增加了比身体更高的平原div.当它被去除时,它使身体有效地滚动或回流.将添加/删除之间的延迟设置为0ms足以允许DOM重新计算,而不会导致任何闪烁.这是我可以找到的最小的脚本,它完全解决了所有职位的问题：我在这个问题的特定实例上的固定元素.

var hack = document.createElement("div");
hack.style.height = "101%";
document.body.appendChild(hack);
setTimeout(function(){
    document.body.removeChild(hack);
    hack = null;
},0);