Исправленные элементы не доступны для кликов, когда я быстро прокручиваю нижнюю часть в iOS Safari 9+

Я столкнулся с очень раздражающей проблемой только в iOS Safari 9+ (8.4 в порядке), где, как только пользователь быстро прокручивает страницу, в результате чего привязывающие ссылки в фиксированных элементах перестают быть кликабельными из-за внешнего вида и фактического щелчка/область ударов не выстраивается в линию со своим элементом, пока пользователь не прокручивается снова.

Это происходит не каждый раз, и может потребоваться несколько попыток "разбить" систему. Содержимое должно быть длиннее окна просмотра, чтобы это работало.

iOS 9+ Safari Исправлено: запись экрана прокрутки позиции

Обходных решений проблемы пока нет. Как я могу решить эту проблему?

ОБНОВЛЕНИЕ: После дальнейшего тестирования проблема возникает только с iOS Safari 9 и выше, протестированной на 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

Ответы

Ответ 1

Эта проблема связана с эффектом bounce в ios и проигрывает панель инструментов и панель заголовка. Единственный способ, который я нашел, чтобы исправить это, - сделать следующее:

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

Вы можете сделать это и в точке останова, чтобы он работал только на мобильных устройствах. Надеюсь, это поможет.

** Добавлена ​​прокрутка переполнения.

Ответ 2

Вы можете сделать ссылку .sticky абсолютной и применить следующий CSS, чтобы ссылка была независимой от окна/браузера.

.sticky {
  width: 50px;
}
.sticky a {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}