Dziwne, poziome białe znaki na iPhonie 4 Safari

Question

Podczas testowania wersji mobilnej mojej witryny na kilku urządzeniach zauważyłem bardzo dziwne zachowanie.

Mam przewijaną zawartość div z overflow: auto, a to działa poprawnie na wszystkich testowanych urządzeniach, z wyjątkiem iPhone 4 na Safari. Inne przeglądarki i urządzenia wyświetlają je poprawnie, nawet iPhone 5 Safari.

W iPhonie 4 Safari podczas przewijania do końca zawartości pojawia się dużo dodatkowych białych znaków na spodzie (wygląda na 100-200% dodatkowej wysokości), a tekst znika po przewinięciu. Nie dzieje się to na żadnym innym urządzeniu w Safari, ani w innych przeglądarkach na iPhone'ie 4.

Czy ktoś kiedyś słyszał o takim zjawisku? Nie mam absolutnie pojęcia, co powoduje to zachowanie lub jak to naprawić.

Ponieważ mam dostęp tylko do ograniczonej liczby urządzeń do testowania, mogę być z widokiem na inne urządzenia/przeglądarki, w których ten problem również występuje. Jeśli masz urządzenie mobilne i chcesz przetestować je również pod adresem, witryna na żywo jest tutaj: Live site. Na mobilnej stronie głównej kliknij jedno z logo, aby rozwinąć zawartość, a następnie spróbuj przewinąć w dół. Opublikuj swoje wyniki w komentarzu.

• Jak to wygląda na iPhone 5 Safari gdy przewijane w dół (nie ma problemu): Image
• Jak to wygląda na iPhone 4 Safari gdy przewijane w dół (problem): Image

Answer 1

Zaryzykowałbym zgadnij, że ujawniasz dziwactwo układu w Safari mobilnym ze względu na sposób, w jaki ukrywasz/wyświetlasz zawartość każdego elementu .company. Za każdym razem, gdy zmieniasz właściwość elementu, przeglądarka musi wykonać ponowne nadawanie. Reflows (zwane również układami) są nieopłacalnym kosztem na mniej zasilanych urządzeniach mobilnych. To prawdopodobnie wyjaśniłoby, dlaczego widzisz problem tylko na iPhonie 4.

Sam testowałem na iPhone 4 i iPhone 3GS, obie z systemem iOS 6.1.3, i udało mi się odtworzyć problem dopiero po rozszerzeniu górny lub dolny element .company, ale nie środkowy. Być może dlatego, że środkowy element .company zawiera mniej dzieci, co oznacza, że ​​potrzebnych jest mniej obliczeń układu.

Zamiast stosowania display: block; i display: none; do każdego z dzieci w elemencie .company, gorąco polecam uprościć javascript, aby zamiast przełączać właściwości wyświetlania na pojedynczym elemencie pojemnika. W ten sposób zmusza się przeglądarkę do wykonywania obliczeń ponownego przepływu tylko raz, a nie do każdego elementu, który indywidualnie zmienia właściwość wyświetlania.

P.S .: "Inne" przeglądarki na iPhonie (np. Chrome i Opera) korzystają z UIWebviews. UIWebviews używa zmodyfikowanej wersji silnika Javascript Nitro (wersja Safari ma włączoną kompilację JIT). Ta subtelna różnica może wyjaśnić, dlaczego problem można odtworzyć tylko w Safari.

Answer 2

Po obejrzeniu trochę miejsca na żywo przy użyciu funkcji zdalnego debugowania Safari 6, znalazłem rozwiązania, które działają dla mnie.

Dodaj -webkit-overflow-scrolling: touch; do elementu .container (ten, który jest dzieckiem elementu #companies).

Po przemyśleniu tego więcej, przypomniałem sobie, że miałem problemy z przewijaniem, dzięki czemu zawartość znikała losowo, a dostosowanie właściwości przewijania z przeplotem naprawiło to za mnie.