iOS Safari runs out of memory with “-webkit-transform”

Question

http://jsfiddle.net/ES4xG/8/ crashes most retina devices.

iOS Safari \"easily\" runs out of memory and crashes when using some -webkit-transform instruc

Answer 1

It crashes because the height of all hardware accelerated items is 257,025px in your example. In my tests it appeared that mobile-safari can handle about 20,000px in height before it crashes.

The hardware-acceleration is awesome but don't abuse it by using it for everything.

To help debug it through you will need to run Safari on Mac from the terminal with the following keys:

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

CA_COLOR_OPAQUE shows which elements are accelerated.CA_LOG_MEMORY_USAGE shows us how much memory is used for rendering.

Have a look at the following links for details:

• http://www.html5rocks.com/en/mobile/optimization-and-performance/
• http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

Answer 2

Google Chrome crashes minutes after running -webkit-transform Javascript animation on a text. I've used both rotate() and rotateZ(), and, especially when the text being animated is in view, the memory usage as reported by the OS spiked up until an Aw, Snap! error occurs.

Using Google Chrome 31.0.1650.63, Blink engine 537.36, under Windows 7 64-bit.

Tested the same animation on Firefox 25.0.1 and it showed no problems.

I even thought Tristan Engine (my own JS library) has serious memory leaks, but checked on the Developer > Timeline memory graph and it shows no indication.

Having a -webkit-transform on an image or empty DIV will not show this bug.

Animating the same text with simple CSS2 properties such as left: or top: will not show up this bug.

Already filed a bug report on Google. Took me three hours to figure out what's wrong.

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

Answer 3

try to use this on the parent of the element you are transforming

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

and this for a better performance on you transformed element

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