我刚刚做了一个网页但是Mobile Safari(iPhone和iPad iOS 5.0.1)中有一个错误,它有两个固定在右上角和右下角的按钮.
直到在打开页面其余部分的文本框上单击提交后,按钮才会淡入...在页面的其余部分加载并且按钮淡入后,您可以单击它们中的任何一个并且它们都可以工作...
但是,单击它们会导致编程滚动,滚动完成后,您不能再点击任何一个按钮,直到您用手指物理滚动页面,即使只是一个小像素滚动...
我注意到的是,在程序化滚动之后,如果你点击TOP按钮的下方,你会看到高亮显示,就好像你点击了BOTTOM按钮并处理了底部按钮的动作,这告诉我当滚动时的错误以编程方式,固定位置按钮仍然与页面的其余部分一起移动,并且在执行实际触摸滚动之前不会返回到其固定位置....
有没有人知道解决这个问题的方法..？
我添加了一个弹出按钮,显示按下了哪个按钮,以便你可以测试它,记得在第一次按下向下按钮(有效)后再次按下按钮,它将无法工作,但点击向上按钮下方你会看到发生的向下按钮动作....
谢谢您的帮助.
托马斯
(如果你能指出我可以向苹果公司提交一个错误的地方,那也是好的,除非已经有了)
编辑:只需单击任一提交箭头,您无需输入其默认的工资/薪水
编辑2:这是一个更简单的例子,显示相同的问题..
http://www.tsdexter.com/MobileSafariFixedPosBug.html
编辑3:向Apple报告错误
我在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) { /* ... */ }