22

https://jsfiddle.net/ES4xG/8/ uses a significant share of memory.

iOS Safari uses a significant share of memory with some -webkit-transform instructions. This approach helps delivers more complex graphics but seems to consume a lot of memory and may even cause crashes.

The demo above shows a text displayed 150 times that would otherwise run normally on a desktop OS 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.

Similarly, functions translateX,Y,Z, scale and others 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. What's the reason behind iOS Safari using a lot of memory or even 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?

Zero Distraction
  • 1,286
  • 3
  • 17
  • 24
  • 2
    You have lot of insanely big text (1500px) which creates big buffers on the gpu - especially on retina devices. This is bound to consume lots of memory.. – i47 Jul 28 '13 at 17:11
  • 1
    Yes you're right memory consumption is a problem. But should safari not crash? So this memory is indeed consumed by the Gpu? Im not suggesting font size is right, this is just a simplification of the problem. You can have lots of elements with smaller fonts it will cause a crash in the same way. Cheers. – Zero Distraction Jul 28 '13 at 21:49
  • Nice code. Crashed my iPad 2 (no retina) on google chrome. That is a lot of rendering to do, though. – TheDoctor Jul 31 '13 at 15:54
  • Google Chrome currently uses Safari under the hood so the rendering issue is essentially the same. – Zero Distraction Aug 01 '13 at 02:23
  • I guess the question is--what's your application? Is there another way to get what you want? – nielsbot Aug 02 '13 at 02:11
  • My application is basically a bunch of floating divs that use translateX,Y CSS instructions. I'm also curious if there are different approaches. Will be helpful if you have time to elaborate your thoughts on the example provided. Thanks! – Zero Distraction Aug 06 '13 at 00:26

3 Answers3

30

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:

Andrey
  • 455
  • 4
  • 14
  • 1
    Thanks for your answer. Indeed this memory usage and the red/green coloring are very useful. Something we also do is MobileSafari plugged in with Instruments from OSX you get similar results and monitor the actual iPad memory. It gets to 600MB very easily! However not much can be done only with memory usage. It seems like on the iPad, the GPU just renders huge 'bitmaps' in virtual memory, so when screen activity jumps up, especially with lots of elements, it is not very easy to tell what is consuming a lot of memory. The process works but still looking for better debugging... – Zero Distraction Jul 31 '13 at 00:53
  • Thanks, I had an issue regarding the height too. This was caused by a large text-indent I had on the element. Lesson learnt! Be careful with text-indent and animations. – Adam Tomat Nov 22 '13 at 12:16
7

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;
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
-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

majoro
  • 1
  • 1
    Hi Marco, thanks for your answer. But this issue is specific to iOS Safari, and it's triggered by rendering with no JavaScript whatsoever. If you have any findings in iOS please let me know. – Zero Distraction Feb 03 '14 at 04:01