znikający nagłówek pozycji ustalonej w ios7 mobilnym safari

Question

Zaskoczyłem tego cały dzień i nie mogę znaleźć rozwiązania.

Mam prosty ul który działa jako stała nagłówka z następującym CSS:

body { 
    width: 100%; 
    height: 100%; 
    min-height: 100%;  
} 

.stream .header { 
    position: fixed; 
    width: 100%; 
    height: 41px; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 10; 
    margin-bottom: 10px; 
    list-style: none; 
    } 

Zawartość poniżej nagłówka ma następujące css:

.stream .stream-content { 
    position: relative; 
    padding-top: 41px; 
    -webkit-transform: translate3d(0, 0, 0); 
} 

gdy strona jest przewinięty w mobilnym safari ios7, następuje:

• pierwszy przewiń w dół - nagłówek przesuwa się wraz ze szczytem strony, aż do zakończenia przewijania.

• Drugi przewijanie w dół - nagłówek znika całkowicie i nie pojawia się ponownie po zakończeniu przewijania.

• przewiń w górę (nadal widoczny jest nagłówek) - nagłówek znika całkowicie i nie pojawia się ponownie po osiągnięciu góry strony.

• przewiń w górę (z ukrytym nagłówkiem) - nagłówek pozostaje ukryty i nie pojawia się ponownie po osiągnięciu góry strony.

• przewiń w górę (już na górze strony z ukrytym nagłówkiem) - nagłówek pojawia się ponownie i działa normalnie, dopóki strona nie przewinie się dwukrotnie.

Nie miałem tego problemu z mobilnym safari iOS6, więc wydaje się, że problem jest związany z nowym pasku adresu zmieniającym rozmiar podczas przewijania.

Ktoś jeszcze ma podobne problemy? Sugestie są mile widziane.

Aktualizacja:

Wygląda więc na to, że usunięcie -webkit-transform3d() na rodzica nagłówka (.stream) usuwa problem, więc musi istnieć konflikt sposób div rodzic jest renderowany i nagłówek w środku.

Nadal jednak szukam pracy.

Answer 1

Miałem ten sam problem, wydaje się, że jest to błąd, który występuje, gdy za dużo dzieje się na stronie, udało mi się to naprawić, dodając następujący kod transformacji do elementu stałej pozycji, (transform: translateZ(0);-webkit-transform: translateZ(0);), która zmusza przeglądarkę do użycia przyspieszenia sprzętowego, aby uzyskać dostęp do graficznej jednostki przetwarzania (GPU) urządzenia, aby piksele latały. Z drugiej strony aplikacje internetowe działają w kontekście przeglądarki, co pozwala oprogramowaniu wykonać większość (jeśli nie wszystkie) renderowania, co skutkuje mniejszą mocą dla przejść. Ale Internet nadrabia zaległości, a większość dostawców przeglądarek zapewnia teraz graficzne przyspieszenie sprzętowe za pomocą określonych reguł CSS.

Korzystanie z -webkit-transform: translate3d (0,0,0); uruchomi procesor GPU w celu przejścia do CSS, dzięki czemu będą bardziej płynne (wyższy FPS).

Uwaga: translate3d (0,0,0) nie robi nic pod względem tego, co widzisz. przesuwa obiekt o 0 pikseli w osi x, yiz. To tylko technika wymuszania akceleracji sprzętowej.

#header { 
    position: fixed; 
    /* MAGIC HAPPENS HERE */ 
    transform: translateZ(0); 
    -moz-transform: translatez(0); 
    -ms-transform: translatez(0); 
    -o-transform: translatez(0); 
    -webkit-transform: translateZ(0); 
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari */ 
} 

Answer 2

Napotkałem ten sam problem z iPadem. Próbowałem, dodając kod do iPada w części JS jako:

if(navigator.userAgent.match(/iPad/i)) { 
    //written code to scrolldown the header part 
} 

To zadziałało dla mnie.