IOS-Flicker-Fehler bei Überlauf der css: scroll wird zu overflow: hidden geändert

8

Ich baue eine App über Phonegap und ich möchte den Bildlauf des div im Hintergrund deaktivieren, wenn ich ein Menü von der Unterseite des Bildschirms wische;

Wenn Sie den Überlauf von "blättern" in "ausgeblendet" ändern, funktioniert der Menüwischvorgang zwar, aber der Bildschirm flackert.

Wer weiß schon, dass Hacker ein div flimmern, wenn das Überlaufverhalten verändert wird?

    
TheNickyYo 19.07.2013, 13:24
quelle

3 Antworten

6

Der Flicker-Bug hängt mit dem GPU-Speicher des Smartphones zusammen. Der Speicher ist begrenzt (VRAM), und wenn die Elemente zu komplex oder größer als der Speicher sind, werden sie erschöpft sein. In android mit CyanogenMod rom können Sie die GPU-Verarbeitung mit Farben auf dem Bildschirm anzeigen. Von grün (geringe Nutzung) bis rot (höhere Nutzung von GPU). Demo-Image . Aber ich weiß nicht, ob es ein ähnliches Werkzeug für IOS gibt.

Dies ist in allen Übergängen der App oder bei Verwendung von GPU sichtbar.

Wie auch immer, du könntest versuchen, die Komplexität deiner Elemente zu entfernen / zu reduzieren, oder dies von hier :

Option 1

%Vor%

Option 2 :

%Vor%

Option 3 :

%Vor%

Oder entfernen Sie einfach die Übergänge (wenn das Problem in Übergängen auftritt):

Option 4

%Vor%     
daniel__ 19.07.2013 13:39
quelle
4

Wenn Sie den Wert des Überlaufs ändern, ändert sich der Wert -webkit-overflow-scrolling von auf und auto , was zu einem Flackern führt.

Sie können einige Informationen in diesem Artikel finden: Ссылка . Das Problem bleibt in iOS7, aber nur für das, was ich sah, wenn Sie von Touch zu Auto wechseln (nicht mehr von Auto zu Touch).

Keine der -webkit-backface-visibility: versteckte, -webkit-transform: translate3d (0,0,0), usw. in meinem Fall funktioniert.

Wie bereits im Artikel erwähnt, könnte ein Workaround dazu führen, dass -webkit-overflow-scrolling: auto auf Kosten der netten Benutzerfreundlichkeit bleibt, die es bietet.

Eine andere Möglichkeit wäre, das Scrollen mit Javascript zu sperren, wenn es Ihre Seite leisten kann:

%Vor%     
GentleFish 23.07.2014 09:47
quelle
3

Die Lösung mit -webkit-backface-visibility: hidden; , die funktioniert, scheint Leistungsprobleme zu verursachen, wenn Sie mehrere Scroller auf einer Seite haben. Safari auf den älteren iPads erreichte die CPU-Grenzen und stürzte den Browser.

Ich habe eine Lösung gefunden, die für mein SPA funktioniert (was bis zu 100 Schieberegler auf einer Liste haben kann), indem ich eine Klasse mit dem anstößigen Stil auf der Seite show & amp; Ereignisse ausblenden.

%Vor%

(Verwenden Sie den Pseudocode jQuery style) Wenn Sie die Seite verlassen, entfernen Sie die Klasse

%Vor%

Dann beim Laden der Seite:

%Vor%

Sie müssen das Scroll-Ereignis auf iOS auslösen, also richten Sie das html-Objekt aus und fügen Sie scrollLeft hinzu, da der erste Bildlauf nicht den Trägheitseffekt hat.

    
Aaron 15.08.2014 11:37
quelle

Tags und Links