Naprawione elementy nie są klikalne, gdy szybko przewiń do dołu w iOS Safari 9+

Question

Mam bardzo denerwujący problem tylko w iOS Safari 9+ (8.4 jest w porządku) gdzie, gdy użytkownik szybko przewija stronę w wyniku czego linki kotwiące w stałych elementach nie będą już klikalne z powodu wyglądu i faktycznego obszaru kliknięcia/trafienia, który nie będzie układał się w swoim elemencie, dopóki użytkownik nie przewinie ponownie.

Nie dzieje się tak samo za każdym razem i może zająć kilka prób "zerwania" systemu. Treść musi być dłuższa niż rzutnia, aby to działało.

Brak obejścia tego problemu jeszcze. Jak mogę rozwiązać ten problem?

AKTUALIZACJA: Po dalszych testach problem dotyczy tylko iOS Safari 9 i nowszych, przetestowanych na iOS 8 i nie ma problemu.

UPDATE 2: Jest teraz jasne, że to się dzieje w przypadku większości stron internetowych wykorzystujących position:fixed; a nawet position:-webkit-sticky;. może chcesz sprawdzić swoje :)

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

Emisja nie nastąpi w ciągu edytorze Codepen, jak to związane z ruchomymi zmianami rozmiaru paska narzędzi/przeglądarki Safari. Proszę eksportować kod na własnej stronie lub skorzystaj z poniższego linku:

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

Answer 1

Ten problem jest związany z efektem odrzuceń w iOS i utraty pasek & pasku nagłówka. Jedynym sposobem, że znalazłem to naprawić to, aby wykonać następujące czynności:

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

Można to zrobić na przerwania, jak również tak, że działa tylko na telefonie komórkowym. Mam nadzieję że to pomoże.

** Dodano przewijanie z przepełnieniem.

Answer 2

Możesz dokonać linku bezwzględnego .sticky a i zastosować poniższe CSS, aby link był niezależny od okna/przeglądarki.

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