przewijanie iPad Safari powoduje, że elementy HTML znikają i pojawiają się ponownie z opóźnieniem

Musisz oszukać przeglądarkę, aby efektywniej korzystała z akceleracji sprzętowej. Można to zrobić za pomocą pustej transformacji 3d:

-webkit-transform: translate3d(0,0,0)

Szczególnie, będzie to potrzebne w przypadku elementów potomnych, które mają deklarację position:relative; (lub po prostu zrób to dla wszystkich elementów potomnych).

Nie gwarantowana poprawka, ale dość skuteczna przez większość czasu.

Końcówka kapelusza: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Targetowanie wszystkich elementów oprócz html: *:not(html) spowodował problemy na innych elementach w moim przypadku. Zmodyfikował kontekst układania, powodując pęknięcie indeksu Z.

Powinniśmy lepiej spróbować skierować odpowiedni element i zastosować -webkit-transform: translate3d(0,0,0) Tylko do niego.

Dodanie -webkit-transform: translate3d(0,0,0) do elementu statycznie nie działa dla mnie.

Stosuję tę właściwość dynamicznie. Na przykład, gdy strona jest przewijana, ustawiam -webkit-transform: translate3d(0,0,0) na elemencie. Następnie po krótkim opóźnieniu resetuję tę właściwość, czyli -webkit-transform: none Takie podejście wydaje się działać.

Dziękuję, @ Colin Williams za wskazanie mnie we właściwym kierunku.

Gdy translate3d nie działa, spróbuj dodać perspektywę. To zawsze działa dla mnie

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

Http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Miałem ten sam problem z iscroll 4.2.5 na ios7. Cały element przewijania po prostu zniknie. Próbowałem dodać translate3d(0,0,0) jak sugerowano tutaj, rozwiązało to problem, ale wyłączyło efekt "snap" iscrolla. Rozwiązanie przyszło z nadaniem "position:relative; z-index:1000;display:block" właściwości css całemu kontenerowi, który przechowuje element scroll i nie ma potrzeby nadawania translate3d elementom potomnym.

Jestem całkiem pewny, że właśnie to rozwiązałem:

overflow-y: auto;

(prawdopodobnie tylko overflow: auto; będzie działać zbyt w zależności od potrzeb.)

Istnieją przypadki, w których stosuje się rotację i/lub stosuje się Indeks Z.

Rotacja : istniejąca deklaracja -webkit-transform w celu rotacji elementu może nie wystarczyć, aby rozwiązać problem z wyglądem (jak -webkit-transform: rotate(-45deg)). W tym przypadku możesz użyć -webkit-transform: translateZ(0px) rotateZ(-45deg) jako triku (uważaj na obracanie Z).

Indeks z: wraz z rotacją można zdefiniować dodatnią Właściwość z-index, Jak z-index: 42. Powyższe kroki opisane pod "Rotacja" były w moim przypadku wystarczające, aby rozwiązać problem, nawet z pustym translateZ(0px). Podejrzewam jednak, że indeks Z w tym przypadku mógł spowodować zniknięcie i ponowne pojawienie się w pierwszej kolejności. W każdym razie własność z-index: 42 musi być zachowana -- -webkit-transform: translateZ(42px) tylko nie wystarczy.

Jest to bardzo częsty problem, z jakim borykają się Programiści i wynika to głównie z właściwości Safari's nie odtwarzających elementów zdefiniowanych jako position : fixed.

Więc albo zmień właściwość position, albo jakiś hack musi być zastosowany, Jak wspomniano w innych odpowiedziach.

Link1

Link2

W moim przypadku (aplikacja PhoneGap na iOS) zastosowanie translate3d do względnych elementów potomnych nie rozwiązało problemu. Mój przewijany element nie miał ustawionej wysokości, ponieważ był absolutnie ustawiony, a ja definiowałem górną i dolną pozycję. To, co dla mnie poprawiło, to dodanie minimalnej wysokości (100px).

Miałem ten sam problem przy użyciu starszej wersji Fancybox. Aktualizacja do v3 rozwiąże twój problem lub możesz po prostu dodać:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}