Neuer Fixed-Position-Bug auf iOS8

Question

Ich habe eine Site mit einer festen Kopfzeile und Slide-Out-Sidebars. Bei iOS7 im Hochformat bleibt die feste Kopfzeile fest, wenn die Seitenleiste sichtbar ist, aber bei iOS8 wird die Kopfzeile leicht nach oben gedrückt, je nachdem, wie weit Sie scrollen. Ich brauche es, um fixiert zu bleiben.

Sehen Sie diese jsbin: http://jsbin.com/xuyevi/2/

Die wichtigsten Stücke sind ein Header, eine Sidebar, und der Hauptinhalt. Der Header ist am oberen Bildschirmrand mit fester Position fixiert und hat einen Z-Index, der beim Scrollen über dem Inhalt bleibt.

Die Seitenleiste ist an der linken Seite des Bildschirms befestigt und wird zunächst durch die Breite nach links verschoben.

Um die Seitenleiste zu öffnen, werden Kopfzeile, Inhalt und Seitenleisten jeweils um die Breite der Seitenleiste nach rechts verschoben.

Auch dies funktioniert perfekt auf iOS7 und allen anderen Browsern, die translate3d unterstützen, und funktioniert sogar in iOS8 im Querformat korrekt. Aber in iOS8 im Hochformat gleitet die feste Kopfzeile vom Bildschirm, je nachdem wie weit der Benutzer gescrollt ist.

Außerdem zeigt der Safari-Inspektor, dass die Menüelemente auf dem Bildschirm von ihren erwarteten Positionen versetzt sind. I.e. Wenn Sie ein Element im Inspektor auswählen, wird ein Bereich auf dem Bildschirm hervorgehoben, der vom tatsächlichen Ort, an dem es gerendert wird, versetzt ist.

Hat jemand anderes in das hineingeraten? Weiß jemand eine Lösung?

EDIT: Der Inspektor denkt, dass die feste Position Header genau ist, wo es sein sollte, obwohl es tatsächlich vom Bildschirm geschoben wird.

Answer 1

Ich habe versucht, etwas Ähnliches zu tun (siehe here und here) dann festgestellt, dass Apple hat eine technical note Empfehlung empfohlen, dass feste Positionierung vermieden werden. Ich schwöre es funktionierte in iOS 7 gut, aber jetzt mit iOS8 "nicht mehr".

Dieses Problem scheint eng verwandt mit diesem Meta-Tag zu setzen:

<meta name="viewport" content="width=device-width"> 

Siehe auch: Fix div to bottom without using css position

Answer 2

ich auf iOS ein ähnliches Problem hatte mehrere feste Position unter Verwendung von Elementen und eine CSS-animierte off-Leinwand nav . Auf einer langen Seite war die aufwärts gerichtete "Drift" ein Blocker, weil sie schließlich bis zu dem Punkt anstieg, wo sie den Navigationsauslöser verbarg, was es unmöglich machte, das Menü zu schließen. Ich habe ausgiebig versucht, eine Lösung zu finden und mich auf einen Workaround festgelegt: Scrollen Sie nach oben, bevor Sie animieren. (#ocnTrigger ist mein off-Leinwand-Menü Trigger.)

$('#ocnTrigger').click(function(){ 
    $('body').animate({ 
     scrollTop: 0 
    }, 0); 
}); 

Answer 3

ein wenig zu spät zur Party, aber das Hinzufügen

html, body { 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

die Offset-Scrolling auf feste Elemente beheben, die versetzt sind (z. B. links : 20px) in iOS 8.