iOS Safari nie renderuje całej strony od pierwszego razu.

Question

Mamy stronę internetową, która dobrze się wyświetla we wszystkich przeglądarkach i urządzeniach, z wyjątkiem tego, że jest otwierana po raz pierwszy w Safari mobile (lub Safari Mac na wąskich ekranach).

WWW: http://sheriff.org/

odtworzyć na iPhone Safari:

1. Otwórz stronę internetową w trybie prywatnym
2. odśwież stronę

odtworzyć na Safari dla Mac:

1. Otwórz Safari w trybie prywatnym
2. Przełącznik User Agent na iOS - iPhone (Develop> User Agent> Safari - iOS - iPhone)
3. Resize przeglądarkę, aby mieć w przybliżeniu o szerokości urządzenia mobilne
4. Otwórz stronę internetową
5. odśwież stronę

Oczekiwany: Page powinien uczynić to samo pierwszy i drugi raz

rzeczywista: po raz pierwszy w trybie prywatnym, tylko zielone okno widoczne Czas drugiej strony powoduje całkowicie

WYNIKÓW : Próbowałem porównać obie strony (gdy renderuje się poprawnie i kiedy renderowanie jest zepsute), aby sprawdzić, czy re są jakąkolwiek różnicą, aby dowiedzieć się, że w obu przypadkach strona ma dokładnie taki sam kod HTML: HTML &.

Jeśli sprawdzać każdy z elementów, które nie są pokazane na pierwszej próbie (która powinna uczynić poprawnie po odświeżania strony), nie będzie żadnych styl, który ma wpływ na widoczność elementu (jak opacity, display, visibility , position ... etc)

UPDATE: wydaje się, że jest błąd w Safari konsoli Unhandled Promise Rejection: [object DOMError], które mogłyby być przyczyną tego problemu, zrobiłem badania i okazało się, że może to być spowodowane przez auto - odtwarzanie wideo na stronie (strona ma wideo, ale wideo jest odtwarzane, nawet jeśli ten błąd został zgłoszony), więc uważam, że powinien istnieć inny powód, dla którego ten błąd został zgłoszony. Każda rada, dlaczego widzimy takie zachowanie w Safari, jest bardzo doceniana.

Answer 1

Twoja strona jest pełna problemów, a niektórzy komentatorzy zauważyli, że niektóre problemy są spowodowane absurdalnie dużym rozmiarem strony głównej, co powoduje, że niektóre zasoby witryny nie są ładowane, gdy chcesz, aby były ładowane, gdy niektóre duże zewnętrzne skrypty ładują się przed twoim css. Powodem, dla którego css w pytaniu ładuje się na "drugiej" próbie, jest to, że css zostaje zbuforowany ... w końcu (po załadowaniu jednego z kilkudziesięciu javascripts prosisz PRIORA o jeden z kilkunastu żądanych plików css). ..i poprawnie wdroży css na kolejnych ładunkach (o ile rzeczywiście zapewnisz wystarczającą ilość czasu i przepustowości do załadowania strony za pierwszym razem).

Chcę dać wam dużo rad off the bat, ale w zgodzie dotyczące postu:

1. Upewnij się, że CSS jest wywoływana przed dowolnych JavaSkrypty w głowie swojej stronie (s) .
2. Zastanów się nad wyeliminowaniem około 90% skryptów, które są niepotrzebne dla Twojej witryny, aby były przydatne ... ponieważ bardzo niewiele osób będzie cierpliwie ładować tak dużo danych przed przeglądaniem Twojej witryny ... szczególnie w relatywnie wolnych przeglądarkach mobilnych.
3. Sprawdź wszystkie błędy w konsoli Chrome (kliknij prawym przyciskiem myszy na swojej stronie w Google Chrome i naciśnij "sprawdź", a następnie spójrz na zakładkę "konsola" ... Twoja witryna zawiera wiele błędów. Musisz je naprawić, jeśli chcesz swoją stronę do standardów zgodnych i bardziej prawdopodobne, aby być indeksowane przez wyszukiwarki
4. Spójrz na swojej stronie w Google Insight Strona:.!. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sheriff.org%2FPages%2FHome.aspx

powodzenia