Feste Elemente sind nicht anklickbar, wenn ich schnell nach unten scrollen in iOS Safari 9+

Question

ich in ein sehr ärgerliches Problem habe laufe nur auf iOS-Safari 9+ (8.4 ist in Ordnung), wo, sobald der Benutzer schnell eine Seite scrollt Dies führt dazu, dass Ankerverknüpfungen in festen Elementen aufgrund des Aussehens nicht mehr anklickbar sind und der tatsächliche Klick-/Trefferbereich nicht mit seinem Element ausgerichtet ist, bis der Benutzer erneut scrollt.

es die gleiche Art und Weise nicht jedes Mal geschehen, und ein paar versucht, das System zu „brechen“ nehmen. Der Inhalt muss länger als das Ansichtsfenster sein, damit dies funktioniert.

Keine Abhilfen für das noch Problem. Wie kann ich dieses Problem lösen?

UPDATE: Nach weiteren Tests tritt das Problem nur mit iOS Safari 9 und höher, getestet auf iOS 8 und es gibt kein Problem.

UPDATE 2: Es ist jetzt klar, dass dies auf den meisten Websites geschieht position:fixed; und sogar position:-webkit-sticky; verwenden. Sie können Ihr überprüfen möchten :)

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

Das Problem innerhalb Codepen Editor nicht geschieht, wie es ist in Bezug auf die Elastic-/Toolbar-Größenänderungen von Mobile Safari. Bitte exportieren Code in eigene Seite, oder verwenden Sie den folgenden Link:

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

Answer 1

Dieses Problem auf den Bounce-Effekt in ios verwendet ist und die Symbolleiste & die Kopfleiste zu verlieren. Der einzige Weg, die ich gefunden habe, dies zu beheben ist folgendes zu tun:

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

Sie es auch an einem Haltepunkt tun könnte, so dass es nur für mobile funktioniert. Hoffe das hilft.

** den Überlauf Scrollen hinzugefügt.

Answer 2

Sie können .sticky eine Verbindung absolut machen und folgenden CSS anwenden, so dass der Link unabhängig vom Fenster/Browser ist.

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