Don’t abuse on enabling
GPU acceleration on iOS!
TL;DR
iOS Safari browser seems to have a limit of ~10MB regarding GPU-accelerated image elements (<img> or any HTML elements with a background-image) created in JS.
How we encountered the issue
We were working on a portfolio where there are obviously a bunch of images. Basically, we have a grid of images for each project that you can click through, in order to check out the details of the project. The latter has many slides, where each one covers the whole browser’s window.
Technically speaking, the navigation is made in JS, so everything is dynamically loaded, no page (re)load.
On QA, somebody logged the following bug:
Random crash on iOS 7/8 for iPad / iPhone 6/6 + Safari/Chrome.
We note that this is not the same limit (variable limit) for an iPhone 5.
Well… As a developer, you might want to reject this bug because of its incompleteness… We want at least a user journey! So we asked for it. But no… nothing!
Usually, as a developer we don’t necessarily test a long (at least 2–3 pages) user journey. We consider that the page navigation is working and that’s it!
How we isolate the bug
It wasn’t a hard guess. If iOS Safari crashes, it generally means that you have an issue with the memory. So we monitored it by passing from a grid’s page to a project’s:
Nothing weird… Some memory got released when the page changed.
Because we were bored, we tried a Google “iOs safari memory limit” which gave us:
- http://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/ — Interesting article but it’s from 2010. Maybe we should test if it’s still an issue with a current iPhone/iPad.
- http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/ — Same as previous link but with a test page.
So we tested this test page on iPad to check if it still crashes. Nope, it doesn’t. Maybe the memory limit changed?! OK let’s do our own tests:
-webkit-transform: translateZ(0);because we found a response on stackoverflow about a crash with it — it crashes when we have ~10MB of images!
- Test on Chrome iOS — crash.
We tried to build up some workarounds but none of them where working:
- <img/> tag vs any HTML elements with a background-image
- enabling GPU acceleration directly on elements before loading images vs after loading images
- a lot of small size images vs less big images
- append with display:none/visibility:hidden on the parent/or on the element
- add -webkit-transform: translateZ(0); after append with a set timeout
- with or without any property like position relative/absolute
It’s working only if you have currently less than ~10MB of images that are handled by GPU.
Conclusion
It seems like iOS Safari has a limit of ~10MB regarding GPU-accelerated image elements (<img> or any HTML elements with a background-image) created in JS. So try to disable GPU acceleration on elements that are not visible on screen. This way, you will remain under this limit! ☺
Going further
We should master Javascript Memory Profiling with Google Chrome but also the other features/tools of Google Chrome. It makes sense that we need to understand how the browser behave and how to use the tools.
—
Sincerely Merci-Michel
www.merci-michel.com
Follow @mercimichel on Twitter
Like us on Facebook
