Nowy błąd pozycji stałej na iOS8

Question

Mam stronę ze stałymi nagłówkami i wysuwanymi paskami bocznymi. Z iOS7 w orientacji pionowej, stały nagłówek pozostaje stały, gdy pasek boczny jest widoczny, ale na iOS8 nagłówek przesuwa się lekko w górę w zależności od tego, jak daleko w dół przewijasz. Potrzebuję go, aby pozostać niezmienionym.

Zobacz ten jsbin: http://jsbin.com/xuyevi/2/

Główne elementy są nagłówek, pasek boczny, a głównej zawartości. Nagłówek jest przymocowany do górnej części ekranu za pomocą ustalonej pozycji i ma indeks Z, który utrzymuje go nad treścią podczas przewijania.

Pasek boczny jest przymocowany do lewej strony ekranu i jest początkowo ukryty po przesunięciu w lewo o jego własną szerokość.

Aby otworzyć pasek boczny, każdy z nagłówków, treści i pasków bocznych jest tłumaczony z prawej strony na szerokość paska bocznego.

Znowu działa to idealnie na iOS7 i wszystkich innych przeglądarkach obsługujących translate3d, a nawet działa poprawnie w iOS8 w orientacji poziomej. Ale w systemie iOS8 w trybie pionowym stały nagłówek zostanie zsunięty z ekranu w zależności od tego, jak daleko użytkownik przewija.

Ponadto za pomocą inspektora Safari widać, że pozycje menu na ekranie są przesunięte względem oczekiwanych pozycji. To znaczy. Wybranie elementu w inspektorze powoduje wyróżnienie obszaru na ekranie, który jest przesunięty względem rzeczywistej lokalizacji, w której jest renderowany.

Czy ktoś inny w tym uczestniczy? Ktoś zna poprawkę?

EDYCJA: Inspektor uważa, że ​​nagłówek pozycji stałej jest dokładnie tam, gdzie powinien być, nawet jeśli faktycznie jest odepchnięty z ekranu.

Answer 1

Próbowałem zrobić coś podobnego (patrz here i here), a następnie stwierdziłem, że Apple opublikowało numer technical note zalecając unikanie ustalonego pozycjonowania. Przysięgam, że działało dobrze w iOS 7, ale teraz z iOS8 już nie "trzyma się".

Problem ten wydaje się ściśle związane z ustawieniem tej meta tag:

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

Zobacz także: Fix div to bottom without using css position

Answer 2

miałem podobny problem na iOS z wykorzystaniem wielu elementów stałej pozycji i CSS animowane poza płótnie nav . Na długiej stronie "dryf" w górę był blokerem, ponieważ ostatecznie wzrósł do punktu, w którym ukrył spust nav, uniemożliwiając zamknięcie menu. Próbowałem dużo, aby znaleźć poprawkę i ustaliłem obejście: przewiń do góry przed animacją. (#ocnTrigger jest mój off-płótno menu wyzwalania.)

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

Answer 3

Trochę późno do partii, ale dodanie

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

ustali offset przewijania na stałe elementy, które są przesunięte (np. Lewy : 20px) w iOS 8.