Błąd migotania IOS przy przepełnieniu css: przewijanie zmienia się na przepełnienie: ukryte

Question

Buduję aplikację za pomocą phonegapa i chcę wyłączyć przewijanie div w tle, gdy przesuwaję menu z dołu ekranu ekran;

Po zmianie przepełnienia z przewijania na ukryty, dlaczego ta funkcja menu jest aktywna, działa, ale powoduje migotanie ekranu.

Ktoś wie, gdzie hack arounds zatrzymać migotanie div, gdy przepełnienie propery jest zmieniony?

Answer 1

Błąd migotania związany jest z pamięcią GPU smartfona. Pamięć jest ograniczona (VRAM), a jeśli elementy są zbyt złożone lub większe niż pamięć, zostanie ona wyczerpana. W Androidzie z CyanogenMod ROM możesz zobaczyć przetwarzanie gpu z kolorami na ekranie. Od zielonego (niskie użycie) do czerwonego (większe użycie gpu). Demo image. Ale nie wiem, czy istnieje podobne narzędzie dla IOS.

Jest to widoczne we wszystkich przejściach aplikacji lub podczas korzystania z GPU.

Zresztą można spróbować usunąć/zmniejszyć złożoność swoimi elementami, albo ten z here:

Option 1

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

Opcja 2this:

.ui-page { 
    -webkit-backface-visibility: hidden; 
} 

Op cja 3this:

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], 
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active { 
     overflow: hidden; 
     -webkit-backface-visibility: hidden; 
} 

.ui-header { 
    position:fixed; 
    z-index:10; 
    top:0; 
    width:100%; 
    padding: 13px 0; 
    height: 15px; 
} 

.ui-content { 
    padding-top: 57px; 
    padding-bottom: 54px; 
    overflow: auto; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.ui-footer { 
    position:fixed; 
    z-index:10; 
    bottom:0; 
    width:100%; 
} 

Albo po prostu usunąć przejścia (jeśli problem jest w przejściach):

Wariant 4

'-webkit-transition': 'none !important', 
'-moz-transition': 'none !important', 
'-o-transition': 'none !important', 
'-ms-transition': 'none !important', 
'transition': 'none !important' 

Answer 2

Zmiana wartości przepełnienia wydaje się mieć -webkit-przepełnienie-przewijanie zmiana wartości od dotknij do auto, co powoduje migotanie.

Możesz znaleźć informacje w tym artykule: http://slytrunk.tumblr.com/post/33861403641/ios6-web-app-flickering-with. Problem pozostaje w systemie iOS7, ale tylko w tym, co zobaczyłem, kiedy przełączasz się z trybu dotykowego na auto (już nie z trybu automatycznego na dotykowy).

Żadna z opcji -webkit-backface-visibility: hidden, -webkit-transform: translate3d (0,0,0) itd. Nie działała w moim przypadku.

jak zasugerowano w poprzednio wymienionych artykuł, jeden obejście może być trzymać -webkit-przelewowy przewijanie: auto, kosztem miły interfejs użytkownika zapewnia.

Innym byłoby zablokować przewijanie javascript, jeśli witryna może sobie na to pozwolić:

function disableScroll() { 
    $(element).on('touchmove', function(event){ 
    event.preventDefault(); 
    }); 
}, 

function enableScroll() { 
    $(element).off('touchmove'); 
} 

Answer 3

rozwiązanie wykorzystujące -webkit-backface-visibility: hidden; który pracuje, wydaje się powodować problemy z wydajnością, jeśli masz wiele przewijacze na stronie.Safari na starszych iPpadach uderzała w ograniczenia procesora i powodowała awarię przeglądarki.

Znalazłem rozwiązanie, które działa na moje SPA (które może mieć do 100 suwaków na liście) przez dodanie i usunięcie klasy ze szkodliwym stylem na stronie pokaż zdarzenia ukryj.

.touchslide { 
    -webkit-overflow-scrolling:touch; 
} 

(jQuery kodu styl pseudo) po opuszczeniu strony, usunąć klasę

selector.removeClass("touchslide"); 

Następnie na stronie obciążenia:

selector.addClass("touchslide"); 
    selector.scrollLeft(0); 

Trzeba wyzwolić zdarzenie przewijania iOS, więc kieruj obiekt HTML i dodaj do scrollLeft, ponieważ pierwszy zwoju nie będzie miał efektu bezwładności.