当我在iOS Safari 9+中快速滚动到底部时,固定元素无法点击

Question

我只是在iOS Safari 9+上遇到了一个非常恼人的问题(8.4很好),一旦用户快速滚动页面,导致固定元素内的锚链接由于外观和实际点击/击中区域而不再可点击在用户再次滚动之前,不要与其元素对齐.

每次都不会以相同的方式发生,并且可能需要几次尝试来"破坏"系统.内容必须长于视口才能生效.

还没有解决问题的方法.我该如何解决这个问题？

更新:进一步测试后,问题只发生在iOS 8及以上版本,在iOS 8上测试并且没有问题.

更新2:现在很明显,这种情况发生在大多数使用position:fixed;和甚至使用的网站上position:-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的弹性/工具栏大小更改有关.请将代码导出到自己的页面,或使用以下链接:

https://cdn.rawgit.com/anonymous/3234ad797dd80e5f8905/raw/ab51c4d8621cfb827f83a33d21940579f8682cde/index.html

Answer 1

此问题与ios中的跳出效果以及丢失工具栏和标题栏有关.我找到解决此问题的唯一方法是执行以下操作:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: auto
}

您也可以在断点处执行此操作,因此它仅适用于移动设备.希望这可以帮助.

**添加了溢出滚动.