iOS Safari hat nicht genügend Arbeitsspeicher mit "-webkit-transform"

http://jsfiddle.net/ES4xG/8/ stürzt die meisten Retina-Geräte ab.iOS Safari hat nicht genügend Arbeitsspeicher mit "-webkit-transform"

iOS Safari "leicht" nicht genügend Arbeitsspeicher und stürzt ab, wenn Sie einige -webkit-transform Anweisungen verwenden. Dieser Ansatz liefert beeindruckende Grafiken, aber gerade auf Retina-Displays scheint er viel Speicherplatz zu verbrauchen und Abstürze zu verursachen.

Die Demo oben zeigt einen Text angezeigt 150 Mal, die sonst normalerweise auf einem PC-Browser laufen würde:

Die Schriftgröße und Anzahl der Elemente übertrieben einen Absturz zu verursachen. Die -webkit-transform: translate3d(0,0,0) soll GPU beschleunigte Zeichnung jedes Elements erzwingen.

In der realen Anwendung verwenden wir translateX, Y, Z, scale und andere, die auf die gleiche Art und Weise zu GPU Gebrauch verbunden zu sein scheinen. Bilder und Sprites werden ebenfalls verwendet, sind jedoch nicht direkt mit Abstürzen verbunden.

das Szenario oben Gegeben:

1) Ist es ein Fehler, dass iOS Safari abstürzt?

2) Beim Einstecken des Speichermonitors von Apple Instruments klettert der virtuelle Speicher und scheint der Schuldige des Absturzes zu sein. Was genau benutzt dieses Gedächtnis?

3) Gibt es einen anderen GPU-beschleunigten Ansatz, der nicht viel Speicher verbrauchen würde?

Quelle

2013-07-24 Zero Distraction

Sie haben viel irrsinnig großen Text (1500px), den großen Puffer auf der GPU erzeugt - vor allem auf Retina-Geräten. Dies ist verpflichtet, viel Speicher zu verbrauchen. – i47

Ja, Sie haben Recht Speicherverbrauch ist ein Problem. Aber sollte Safari nicht abstürzen? Also wird diese Erinnerung tatsächlich von der GPU konsumiert? Ich schlage nicht vor, die Schriftgröße ist richtig, das ist nur eine Vereinfachung des Problems. Sie können viele Elemente mit kleineren Schriftarten haben, die auf die gleiche Weise zum Absturz führen. Prost. –

Netter Code. Crashed mein iPad 2 (keine Netzhaut) auf Google Chrome. Das ist jedoch eine Menge Rendering zu tun. – TheDoctor

Es stürzt ab, weil die Höhe der gesamten Hardware beschleunigt Artikel ist in Ihrem Beispiel 257.025px. Bei meinen Tests hat sich herausgestellt, dass mobile-safari ungefähr 20.000 px in der Höhe bewältigen kann, bevor es abstürzt.

Die Hardware-Beschleunigung ist großartig, aber missbrauchen Sie sie nicht, indem Sie sie für alles verwenden.

debuggen Um durch Sie Safari auf Mac vom Terminal mit den folgenden Tasten ausführen müssen:

$> export CA_COLOR_OPAQUE=1 
$> export CA_LOG_MEMORY_USAGE=1 
$> /Applications/Safari.app/Contents/MacOS/Safari

CA_COLOR_OPAQUE zeigt, welche Elemente sind accelerated.CA_LOG_MEMORY_USAGE uns zeigt, wie viel Speicher für die Wiedergabe verwendet wird.

Werfen Sie einen Blick auf die folgenden Links für weitere Details:

Quelle

2013-07-30 14:49:03 Andrey

Danke für Ihre Antwort. Tatsächlich sind diese Speichernutzung und die Rot/Grün-Färbung sehr nützlich. Etwas, das wir auch tun, ist MobileSafari, das mit Instrumenten von OSX eingesteckt wird, erhalten Sie ähnliche Resultate und überwachen den tatsächlichen iPad Gedächtnis. Es kommt auf 600MB sehr leicht! Jedoch kann nicht viel nur mit der Speichernutzung getan werden. Es scheint, als ob die GPU auf dem iPad nur riesige 'Bitmaps' im virtuellen Speicher rendert. Wenn also die Bildschirmaktivität besonders mit vielen Elementen aufspringt, ist es nicht sehr einfach zu sagen, was viel Speicher verbraucht. Der Prozess funktioniert, aber immer noch auf der Suche nach besseren Debugging ... –

Danke, ich hatte ein Problem bezüglich der Höhe zu. Dies wurde durch einen großen Texteinzug verursacht, den ich auf dem Element hatte. Lektion gelernt! Seien Sie vorsichtig mit Texteinzügen und Animationen. –

versuchen, dies auf dem übergeordneten des Elements verwenden Sie

-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
transform-style: preserve-3d;

und diese für eine bessere Leistung wandeln auf Sie Element

umgewandelt

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden;

Quelle

2013-07-26 16:28:30

Danke für deine Antwort. Ich habe mir diese zwei Eigenschaften angeschaut, ich denke, sie würden in ganz bestimmten Fällen helfen. Ich bin immer noch auf der Suche nach weiteren Hinweisen auf die GPU usw. –

Danke, genau das habe ich gebraucht! –

-1

Google Chrome stürzt Minuten nach einem Text -webkit-transform Javascript Animation läuft. Ich habe sowohl rotate() als auch rotateZ() verwendet, und besonders, wenn der Text, der gerade animiert wird, in Sicht ist, hat die vom Betriebssystem gemeldete Speicherauslastung bis zu einem Aw, Snap! Fehler tritt auf.

Verwenden Sie Google Chrome 31.0.1650.63, Blink Engine 537.36, unter Windows 7 64-Bit.

Getestet die gleiche Animation auf Firefox 25.0.1 und es zeigte keine Probleme.

Ich dachte sogar Tristan Engine (meine eigene JS-Bibliothek) hat ernsthafte Speicherlecks, aber auf der Developer> Timeline Speichergrafik überprüft und es zeigt keine Anzeichen.

Eine -webkit-transform auf einem Bild oder leeren DIV wird diesen Fehler nicht angezeigt.

Wenn Sie denselben Text mit einfachen CSS2-Eigenschaften wie left: oder top: animieren, wird dieser Fehler nicht angezeigt.

Bereits einen Fehlerbericht bei Google eingereicht. Nahm mich drei Stunden, um herauszufinden, was los ist.

Bugreport:https://code.google.com/p/chromium/issues/detail?id=328245&thanks=328245&ts=1386906785

Quelle

2013-12-13 07:55:36

Hallo Marco, danke für deine Antwort. Aber dieses Problem ist spezifisch für iOS Safari und wird durch das Rendering ohne JavaScript ausgelöst. Wenn Sie irgendwelche Befunde in iOS haben, lassen Sie es mich bitte wissen. –

iOS Safari hat nicht genügend Arbeitsspeicher mit "-webkit-transform"

Antwort

Verwandte Themen