W aplikacji mobilnej mam div którymożna przewijać za pomocą nowego fantazyjnego -webkit-overflow-scrolling: dotknij. Jedynym problemem jest to, że treść jest renderowana dopiero po zakończeniu przewijania. Czy istnieje sposób, aby Mobile Safari (i być może inne przeglądarki mobilne, takie jak ta w Androidzie) renderowały HTML podczas przewijania jednym palcem?
.layer-content {
position: absolute;
top: 112px;
bottom: 0;
width: 100%;
background: #e6e6e6;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Odpowiedzi:
2 dla odpowiedzi № 1Nie całkiem. Tak właśnie działa iPhone. Jeśli przewijasz, wszystkie zasoby są używane, aby przewijanie było bardzo płynne, kosztem nie pokazywania nowych części. Być może możesz oszukać przeglądarkę, aby uważała, że warstwa jest większa, zwiększając ją i dodając warstwę nad częścią, której nie chcesz pokazywać, ale to nie działa dla wszystkich układów. Po prostu zostawiłbym to. Użytkownicy są do tego przyzwyczajeni, ponieważ normalne strony mają ten sam „problem z renderowaniem”.
4 dla odpowiedzi nr 2
Możesz obejść ten problem, używając akceleracji sprzętowej. Spróbuj dodać następujący CSS do elementów w środku .layer-content:
-webkit-transform: translate3d(0,0,0);
1 dla odpowiedzi nr 3
Pozycja: absolut ma problemy z renderowaniem. Mobile Safari nie będzie renderować elementów, które nie mają standardowej wartości do pozycjonowania, dopóki przewijanie się nie zatrzyma.
Jeśli pozycja jest automatyczna (wartość domyślna), Mobile Safari wyświetli element podczas przewijania.
0 dla odpowiedzi nr 4
Jestem cholernie pewny, że właśnie to rozwiązałem:
overflow-y: auto;
Dodaj to do przewijanego elementu.
(Prawdopodobnie tylko overflow: auto; działałby również w zależności od potrzeb).