2016-05-13 12 views
5

Zajmuję się tworzeniem aplikacji w Cordova, gdzie użytkownik może przełączać się między kilkoma "ekranami", które są po prostu ukrytymi elementami div widocznymi po przejściu.Cordova iOS - przejście powoduje flashowanie strony

Przewijanie w systemie iOS było straszne, więc dodałem -webkit-overflow-scrolling: touch do elementu kontenera i posortowałem problem z przewijaniem, który miałem.

Jednak od tego czasu przejścia stron powodują miganie stron za każdym razem, gdy aplikacja przenosi się na nową stronę.

Oto mój CSS

.scrollable { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

Po naciśnięciu przycisku, aby przejść do następnej strony używa tego kodu JavaScript do przejścia

this.lastScreen.getLayout().getElement().css({ 
    'left': -$(window).width(), 
    'transition': 'left 0.25s ease-out' 
}); 

this.currentScreen.getLayout().getElement().css({ 
    'left': 0, 
    'transition': 'left 0.25s ease-out' 
}); 

<div class="container scrollable"> 
    //screen content here 
</div> 

Jeśli usunąć -webkit-overflow-scrolling: touch; z funkcją przewijania klasie działa dobrze, nie ma błysku. Jednak przewijanie strony jest okropne.

Mam uruchomiony system iOS 9.3.1. Przeczytałem i okazało się, że to może być problem z iOS 8+, ale nie mogę znaleźć konkretnej odpowiedzi, która pomogłaby mi

+0

Have próbowałeś oddzielić przewijanie od przejścia? DIV1 to przejście, a wewnątrz niego DIV2 ma atrybut przewijania. – hdezela

Odpowiedz

3

Dodaj CSS do klas, które mają przejść:

-webkit-transform: translate3d(0px,0px,0px); 

To właśnie zmusza akceleracji sprzętowej, dzięki czemu stają się gładsze niż normalny, a prawdopodobnie rozwiązać swoje problemy

+0

Czy dodać to do CSS tego.lastScreen.getLayout(). GetElement()? – Pooshonk

+0

Tak, w każdym miejscu, w którym przejście nie jest płynne – Del

+0

Okej, spróbuję. – Pooshonk

Powiązane problemy