IOS -webkit-przepełnienie-przewijanie przewija na niewłaściwej osi, lub wcale nie

Question

Buduję aplikację mobilną dla IOS, z html5. Używam "-webkit-overflow-scrolling: touch", aby uzyskać przewijanie rodzimej bezwładności, ale jest to bardzo błędne. Rozwiązałem problemy z treścią nie renderującą do czasu zatrzymania przewijania, ale jeden trwały błąd to:

Gdy próbuję przewijać w górę iw dół, nic się nie dzieje, ale gdy próbuję przewijać poziomo, zawartość przewija się pod kątem pionowo (90 stopni poza osią). Jeśli poruszam się po mojej aplikacji i wracam na tę stronę, czasami zostanie ona naprawiona. Czasami w ogóle nie przewinie się, mimo że jest pełen treści.

Z tego, co udało mi się zdobyć, konsensus wydaje się, że Apple jest świadomy tego błędu i nie ma zamiaru go naprawić w najbliższym czasie. Czy ktoś znalazł rozwiązanie, aby uzyskać - przepełnienie -webkit - przewijanie do poprawnego działania?

Answer 1

Też borykałem się z tym błędem od miesięcy. Najlepsza charakteryzacja, że ​​znalazłem to:

https://bugs.webkit.org/show_bug.cgi?id=87391

który mówi, że to się dzieje, gdy strona ma iFrame i zawartość są ustawiane JavaScript. Moje bieżące obejście problemu: The Graphics Codex version 1.6 polega na użyciu programu iScroll4 do wyraźnego przewijania strony zamiast przewijania dotykiem. Ponieważ Javascript jest jednowątkowy, może to być powolne, jeśli wykonujesz także animacje lub ładowanie treści tła.

Answer 2

Wystąpił ten sam problem: węzeł używający -webkit-overflow-scrolling: scroll, który przewijałby się tylko w górę/w dół za pomocą gestu przewijania w lewo/w prawo.

Oto co znalazłem na możliwe przyczyny:

• iframe obecne na stronie wszędzie, widoczne lub w inny sposób (source)
• visibility: hidden stosowanej do każdego rodzica węzła przewijalnej (source)

Jednak żadna z tych sytuacji nie występowała w mojej aplikacji internetowej. Miałem przewijany kod <ul> wewnątrz czystego modowego okna dialogowego, które napisałem, który użył sprytnej sztuczki, aby dodać przezroczystą warstwę - pseudoelement ::after z position: fixed. Po usunięciu position: fixed z pseudoelementu problem zniknął! Oczywiście sprawiło to, że moja sprytna sztuczka była bezużyteczna, ale było ciekawie dowiedzieć się, że ten błąd mógł zostać wywołany przez tę sytuację.

Urządzenie: iOS 5.1.1 na 2012 IPAD 3 (siatkówki)

szkodliwego kodu:

/* Underlay */ 
.dialog::after { 
    z-index: -1; 
    position: fixed; /* <--- This was the problem! */ 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: rgba(0,0,0,0.4); 

    content: ""; 
} 

tl; dr: jeśli elementy zawierające mają ustalone położenie pseudo element, usunięcie go może naprawić problem z przewijaniem.

Answer 3

Wiem, że problem jest trochę stary, ale musiałem sprawić, aby moja strona działała na iOS 5. Niestety nie udało się usunąć ani zastąpić elementu iframe. Zauważyłem, że obecność elementu iframe spowodowała problem tylko wtedy, gdy został wyrenderowany przed elementem, który mógł płynnie przewijać.Dołączenie elementu iframe do dokumentu później (po elemencie z opcją --webkit-overflow-scrolling: touch) naprawiło problem :)