Pracuję nad systemem przewijania/przesuwania w Mapach Google. System ma być dużo prostsze niż „oryginał” (bez powiększania) i jako taki jest zbudowany w bardzo prosty sposób:JS/overflow: ukryte problemy z wydajnością w Safari na iPadzie/iOS
- Jest zawierające div reprezentujących rzutnię z przelewem ustawioną na ukryte i stały rozmiar
- dIV zawiera inny div, który to jest przesuwane wokół oparciu mysiej ruchu
- zależności od widocznego obszaru stałych div (lub IMG) dodano do div powlekania do wyświetlania części o bardzo dużym obrazie
Ta konfiguracja działa tak jak powinna o. Zwłaszcza w zwykłych przeglądarkach na komputerach działa bezbłędnie. Przewijanie jest płynne.
Nie tak dużo na iPadzie: tutaj wszystko wydaje się bardzo powolne. Występuje wyraźnie zauważalne opóźnienie podczas panoramowania i rejestracja kliknięć zajmuje bardzo dużo czasu.
W pierwszej kolejności musiałem "przetłumaczyć" zdarzenia dotykowe na zdarzenia myszy. Chociaż bez tego trudno jest sprawdzić różnicę w wydajności, uważam, że nie jest to przyczyną problemu, ponieważ reakcja na proste kliknięcia pozostaje jednakowo niska podczas dezaktywacji.
Próbowałem dowiedzieć się, co może być tego przyczyną, rzucając okiem na samą Mapę Google (która działa równie dobrze na iPadzie, jak wszędzie), ale bez skutku (po prostu zbyt skomplikowane, aby uzyskać szybki pomysł). W końcu myślę, że może to mieć coś wspólnego ze sposobem, w jaki mobilne Safari przekazuje divy w pojemniku ustawionym na "przepełnienie: ukryte", niektóre problemy z buforowaniem lub wymagane sztuczki JS, których nie znam.
Jakiś pomysł, w którym mógłbym zacząć szukać?
Warto wspomnieć, że używam głównie JQuery do obsługi zdarzeń. – Lunikon
Trudno powiedzieć, nie widząc więcej kodu ... określone reguły CSS, których używasz (poza samym przepełnieniem: ukryte) mogą mieć duży wpływ na sposób, w jaki przeglądarka obsługuje renderowanie. Na przykład w Google Maps znajduje się div kontenera, który ma 'position: relative' (bez właściwości' top' lub 'left'), a następnie wszystkie elementy potomne to' position: absolute' z 'left' i' top 'właściwości do obsługi przesuwania. Co masz? –
Wygląda całkiem podobnie w mojej konfiguracji. Kontener był absolutny, zmieniłem go na względny teraz, ale nie miał zauważalnego wpływu na ogólną wydajność przeciągania. – Lunikon