移动Webkit重排问题

Question

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

以下是该问题的实例.CSS的核心非常直接.它在页面左侧定位一个字母索引:

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

当元素固定在主体顶部的位置时会发生问题.它完全能够与滚动变化进行交互,然后停止接受输入.如果我(手动)摇动滚动甚至一个像素,那么它再次变为活动状态.该示例尽可能简单,不使用任何JavaScript.在真正锤击它之后,我发现该元素似乎认为它已滚动但已在视觉上固定.换句话说,如果您单击"A"然后再次尝试单击"A",有时您将再次单击,但它将位于列表的下方.这对我来说似乎是一个CSS回流问题.我知道移动webkit试图减少回流次数.

以下是变通方法的实例.

我能够使用JS来强制整个文档的CSS重新滚动滚动(使用限制,直到滚动后100ms才能发生这种情况)这似乎解决了这个简单示例中的问题.不幸的是,这对这个问题的真实版本没有帮助.

这是问题页面和变通方法脚本的代码.

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

编辑:我忘了提到该示例显式强制视口到窗口的大小.因此用户无法放大/缩小,这意味着position:fixed应该将元素锚定到窗口的左侧.

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

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

Answer 1

实际上解决了我的特定问题的答案是在@Paul Sweatte的一个链接中找到的解决方案的变体:

基本上,增加了一个高于身体的普通div.当它被移除时,它会使身体有效地滚动或回流.在添加/删除之间将延迟设置为0ms足以允许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);

Answer 2

具有讽刺意味的是,我原来的重排修复(链接到问题中)现在也在我的真实应用程序中工作.将其变体放在这里以防万一对其他任何人都有用.它可以在任何容器元素上调用,或者如果没有传递任何容器元素,则回流整个文档.

var forceReflow = function(elem){
    elem = elem || document.documentElement;

    // force a reflow by increasing size 1px
    var width = elem.style.width,
        px = elem.offsetWidth+1;

    elem.style.width = px+'px';

    setTimeout(function(){
        // undo resize, unfortunately forces another reflow
        elem.style.width = width;
        elem = null;
    }, 0);
};

关于这一点的好处是它不需要创建/添加/删除元素,只需调整容器即可.