iOS Safari kończy się pamięć z " - webkit-transform"

Http://jsfiddle.net/ES4xG/8 / powoduje awarię większości urządzeń siatkówki.

IOS Safari "łatwo" kończy się pamięć i zawiesza się podczas korzystania z niektórych -webkit-transform instrukcji. Takie podejście zapewnia imponującą grafikę, ale zwłaszcza na wyświetlaczach retina, wydaje się zużywać dużo pamięci i powodować awarie.

Powyższe demo pokazuje tekst wyświetlany 150 razy, który w przeciwnym razie działałby normalnie na przeglądarce PC:

Rozmiar czcionki i liczba elementów jest przesadzona, aby spowodować crash. -webkit-transform: translate3d(0,0,0) ma wymusić przyspieszone rysowanie każdego elementu przez GPU.

W prawdziwej aplikacji używamy translateX,Y,Z, scale i inne, które wydają się być podłączone do GPU używać w ten sam sposób. Obrazy i obrazki są również używane, ale nie są bezpośrednio połączone z awariami.

Biorąc pod uwagę powyższy scenariusz:

1) Czy to błąd, że iOS Safari się zawiesza?

[[6]}2) podłączenie monitora pamięci Apple Instruments, Pamięć wirtualna wspina się i wydaje się być sprawca wypadku. Co dokładnie używa tej pamięci?

3) czy jest jakieś inne podejście przyspieszające GPU, które nie zużywałoby dużo pamięci?

Author: Zero Distraction, 2013-07-24
Source

3 answers

Powoduje awarię, ponieważ w twoim przykładzie wysokość wszystkich elementów z akceleracją sprzętową wynosi 257 025 px. W moich testach okazało się, że mobile-safari może obsłużyć około 20.000 px wysokości przed awarią.

[1]}akceleracja sprzętowa jest niesamowita, ale nie nadużywaj jej, używając jej do wszystkiego.

Aby pomóc w debugowaniu, musisz uruchomić Safari na Macu z terminala za pomocą następujących klawiszy: 

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

CA_COLOR_OPAQUE pokazuje, które elementy są accelerated. CA_LOG_MEMORY_USAGE pokazuje nam, ile pamięci jest używane do renderowania.

Spójrz na następujące linki, aby uzyskać szczegółowe informacje:

 28
Author: Andrey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-30 14:49:03

Spróbuj użyć tego na rodzicu elementu, który przekształcasz 

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

I to dla lepszej wydajności na You transformed element 

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
 7
Author: Gildas.Tambo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-26 16:28:30

Google Chrome zawiesza się kilka minut po uruchomieniu animacji Javascript na tekście. Używałem zarówno rotate(), jak i rotateZ(), a zwłaszcza gdy Animowany tekst jest widoczny, zużycie pamięci zgłoszone przez system operacyjny wzrosło do aw, Pstryk! występuje błąd.

Korzystanie z Google Chrome 31.0.1650.63, Blink engine 537.36, pod Windows 7 64-bit.

Testowałem tę samą animację na Firefoksie 25.0.1 i nie pokazywał żadnych problemów.

Myślałem nawet o silniku Tristan (mój własny JS Biblioteka) ma poważne wycieki pamięci, ale zaznaczone na wykresie Developer > Timeline memory i nie pokazuje żadnych wskazań.

Posiadanie -webkit-transform na obrazku lub pustym DIV nie pokaże tego błędu.

Animowanie tego samego tekstu z prostymi właściwościami CSS2, takimi jak left: lub top: nie wyświetli tego błędu.

Już zgłosiłem błąd w Google. Trzy godziny Zajęło mi ustalenie, co jest nie tak.

Raport o błędzie: https://code.google.com/p/chromium/issues/detail?id=328245&thanks=328245&ts=1386906785

 -2
Author: Marco Jonathan Rossi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-13 07:55:36