Исправленные элементы не доступны для кликов, когда я быстро прокручиваю нижнюю часть в 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; } 

Проблема не возникает в редакторе Codepen, так как это связано с изменением размера / размера панели инструментов Safari. Пожалуйста, экспортируйте код на свою страницу или используйте следующую ссылку:

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

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

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

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

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

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

 .sticky { width: 50px; } .sticky a { position: absolute; top: 0; bottom: 0; margin: auto; } 
  • Как очистить историю в WKWebView?
  • Как изменить цвет элемента HTML, когда пользователь нажимает на него?
  • Прокрутка Div иногда зависает, если я использую -webkit-overflow-scrolling
  • Как я могу получить файл с помощью WKWebView?
  • Не удалось воспроизвести WebKitLegacy - crash
  • Получение всех файлов cookie из WKWebView
  • WKWebView заставляет мой контроллер просмотра протекать
  • iOS Webkit не работает на устройстве, но работает на симуляторе при быстром
  • проблема с прокруткой webkit-переполнения с осью x?
  • Анимация Webkit оставляет на экране нежелательные пиксели
  • Удалить 3 пикселя в текстовом поле iOS / WebKit
  • Давайте будем гением компьютера.