code, thoughts, and learnings

iOS crashing, Android flickering and webkit-backface-visibility

21 Mar 2015

I was recently troubled with a web application crashing on older iOS devices without an obvious cause. We were loading a page with several tiles of content, and it would either crash as the page loaded or if you happen to scroll down the page too quickly.

Web searches hinted at a memory issue (and iOS crash reports corroborated that theory), so I sifted through our Javascript and made improvements wherever possible - it’s an older Angular app, so I was able to find a few wins here and there. But that still didn’t solve the crashing problem.

Then as another test, I cut out all our CSS, and the crashing issue stopped! After some hunting through our stylesheets, I landed on this:

-webkit-backface-visibility: hidden;

This was sitting at the top level to deal with a transition flickering issue seen in some Webkit browsers (but mostly just native Android), and it turns out to be a memory hog. We’ve gone forth without the -webkit-backface-visibility rule so that iOS users won’t suddenly blow up with memory problems, and for now our native Android browser users will have to experience some flickering.