2017-03-29 8 views
3

In einer Hybrid-App haben wir bei der Arbeit das Scrollen deaktiviert, wenn ein Dialog geöffnet wird. Dies war etwas, das perfekt funktionierte, bis iOS 10.3 herauskam.Dynamisch hinzugefügte Position: Fixes Element ist an der falschen Stelle

Der Fall:

Die Sperrung der Scroll geschieht, wenn ein Benutzer auf eine Schaltfläche klickt. Ein Overlay wird mit etwas Inhalt angezeigt. Um sie zu entfernen, tippen Sie entweder auf die Schaltfläche zum Schließen oder auf das Overlay. Nichts Besonderes.

Die Art, wie wir das Scrollen deaktivieren ist durch den folgenden Code einstellen: (. Ich die Augenschmaus entfernt haben, es zu halten lesbar A complete example can be found here)

HTML:

<body> 
    <header onClick="unFreeze()"> 
     Header 
    </header> 

    <section></section> 

    <section> 
     <button onClick="freeze()">Toggle freeze</button> 
    </section> 

    <section></section> 

    <section></section> 

    <section></section> 

    <section></section> 

    <div class="backdrop" onClick="unFreeze()"></div> 
</body> 

Javascript:

function freeze() { 
    var $body = document.querySelector('body'); 
    $body.style.top = (0 - window.pageYOffset) + 'px'; 
    $body.classList.add('body--freeze'); 
} 

function unFreeze() { 
    var $body = document.querySelector('body'); 
    var scrollTop = - parseInt($body.style.top); 

    $body.style.top = ''; 
    window.scrollTo(0, scrollTop); 

    $body.classList.remove('body--freeze'); 
} 

CSS:

.body--freeze { 
    background-color: hotpink; 
    position: fixed; 
    width: 100%; 
} 

.body--freeze header { 
    position: fixed; 
    top: 0; 
} 

.body--freeze .backdrop { 
    visibility: visible; 
} 

header { 
    height: 50px; 
    left: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    visibility: visible; 
    z-index: 51 
} 

section { 
    height: 100vh; 
} 

.backdrop { 
    bottom: 0; 
    visibility: hidden; 
    left: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 100%; 
} 

Reproduzieren Sie das Problem:

Scroll nach unten, bis Sie die "Toggle freeze" Knopf. Drücken Sie die Taste, wenn sie sich irgendwo in der Mitte des Bildschirms befindet. Sie werden bemerken, dass die Kopfzeile irgendwo auf dem Bildschirm positioniert wird, aber nicht oben. Beachten Sie, dass, obwohl es unten zu sein scheint, die Auswahl des "Header" -Text immer noch an der ursprünglichen oberen Position erfolgen kann.

Klicken Sie auf den grünen Hintergrund oder die Kopfzeile, um die Seite aufzuheben.

Dieses Problem tritt nur einmal auf. Beim zweiten Mal wird die Kopfzeile korrekt angezeigt.

Wenn Sie weiter blättern, bis die Schaltfläche den oberen Rand der Seite erreicht, wird auch das Bild der Kopfzeile korrekt angezeigt.

Dies tritt nur auf iOS 10.3, alle anderen Versionen funktionieren gut.

+1

Wir Probleme sehen Behälter in Bezug auf festgelegt. Absolut positionierte UI-Elemente werden abgeschnitten und so. Denken Sie daran, dies vor 4 Jahren zu sehen, wenn Sie mit iOS und festen Elementen arbeiten. Schätze, es ist zurück. – Jompis

+0

Auch ein Problem mit der Position behoben ... – Indigon

+0

Es scheint ein Problem, aber ich konnte zu diesem Zeitpunkt keine verwandten Probleme finden ... –

Antwort

Verwandte Themen