我在iOS Safari 9中遇到了一个非常讨厌的问题(8.4是好的),一旦用户快速滚动页面,导致固定元素中的锚点链接不再是可点击的,因为外观和实际的点击/命中区域与其元素排列直到用户再次滚动.
每次都不会发生同样的事情,可以尝试“破解”系统.内容必须比此视窗的工作时间长.
更新:进一步测试后,问题只发生在iOS Safari 9及以上,在iOS 8上测试,没有任何问题.
更新2:现在很清楚,这发生在大多数使用position:fixed的网站上甚至位置:-webkit-sticky;你可能想检查你的:)
HTML
<section> <article></article> <article></article> <article></article> </section> <div class="sticky"> <a href=""></a> </div>
CSS:
html,body { margin:0; } article { display: block; height: 200px; width: 100%; margin-bottom: 20px; background: whitesmoke; } .sticky { width:100%; height:100px; position: fixed; bottom:0; background: orange; text-align:center; } .sticky a { display: inline-block; width: 100px; height: 100px; background: yellow; }
http://codepen.io/toobulo/pen/dGEodo
Codepen编辑器中不会发生此问题,因为它与移动Safari的弹性/工具栏大小更改有关.请将代码导出到自己的页面,或使用以下链接: