css - 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 instructions. This approach delivers impressive graphics but, especially on retina displays, just seems to consume a lot of memory and cause crashes.

The demo above shows a text displayed 150 times that would otherwise run normally on a PC browser:

The font size and number of elements is exaggerated to cause a crash. The -webkit-transform: translate3d(0,0,0) is intended to force GPU accelerated drawing of each element.

In the real application, we are using translateX,Y,Z, scale and others that seem to be connected to GPU use in the same way. Images and sprites are also used, but they are not connected to crashes directly.

Given the scenario above:

1) Is it a bug that iOS Safari is crashing?

2) Plugging in Apple Instruments Memory Monitor, Virtual Memory climbs and seems to be the culprit of the crash. What exactly is using this memory?

3) Is there any other GPU accelerated approach that would not consume a lot of memory?

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