相关疑难解决方法(0)

是否可以在Mobile Safari中相对于视口定位元素？正如许多人所指出的那样,position: fixed它不起作用,但Gmail刚刚推出了一个几乎就是我想要的解决方案 - 请参阅消息视图中的浮动菜单栏.

在JavaScript中获取实时滚动事件也是一种合理的解决方案.

我在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) { /* ... */ }