css - Mobile Webkit 回流问题

Question

我在 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;
}

当元素固定在 body 顶部时会发生此问题。它完全能够与之交互，直到滚动发生变化，然后它停止接受输入。如果我(手动)将滚动条微动一个像素，它就会再次激活。该示例尽可能简单，并且不使用任何 JavaScript。在真正敲打它之后，我发现该元素似乎认为它是滚动的，但在视觉上已被修复。换句话说，如果您点击“A”然后尝试再次点击“A”，有时您会再次点击，但它会在列表的下方。这对我来说似乎是一个 CSS 回流问题。我知道移动 webkit 试图减少回流次数。

Here is a live example of the workaround.

我能够使用 JS 强制整个文档的 CSS 在滚动时重排(使用 throttle 防止它在滚动后 100 毫秒内发生)，这似乎在简单示例中解决了这个问题。不幸的是，这对这个问题的真实版本没有帮助。

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

我的问题是这里发生了什么，是否有我缺少的 CSS 解决方法？具体来说，我很好奇是否有任何 CSS 大师可以弄清楚阻止点击的布局情况从击中固定元件上的正确位置？更好地理解可能有助于找到真正的解决办法。

编辑:我忘了提及该示例明确强制视口(viewport)为窗口大小。所以用户不能放大/缩小，这意味着 position:fixed 应该将元素锚定在窗口的左侧。

更新 (2012-09-20):这似乎已在 iOS 6 上的 Mobile Safari(以及 UIWebView)中得到修复。任何解决方法都应首先检查以确保它在 iOS < 6 上。例如，使用 CssUserAgent这看起来像:

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

Answer 1

实际解决我的特定问题的答案是找到的解决方案的变体 in one of @Paul Sweatte's links :

本质上，添加了一个比主体高的普通 div。当它被移除时，它会导致主体有效地滚动或回流。将添加/删除之间的延迟设置为 0 毫秒足以让 DOM 重新计算而不会引起任何闪烁。这是我能找到的最小脚本，它完全解决了此问题的我的特定实例上所有 position:fixed 元素的问题。

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