html – 当我快速滚动到iOS Safari 9的底部时,固定的元素不可点击

我在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的弹性/工具栏大小更改有关.请将代码导出到自己的页面,或使用以下链接：

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

解决方法

这个问题与ios中的反弹效果有关,并且丢失了工具栏&标题栏.我找到解决这个问题的唯一方法是执行以下操作：

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

你可以在断点上做到这一点,只适用于移动设备.希望这可以帮助.

**增加了溢出滚动.

html – 当我快速滚动到iOS Safari 9的底部时,固定的元素不可点击

解决方法

猜你在找的HTML相关文章