Ipad/iPhone Browser Crashing When Loading Images in JavaScript

Mobile Safari on iOS crashes on big pages

I actually found the problem. It wasn't with JS as I thought, but with the CSS. I added class to make a CSS transition to fade in some elements. For anonymous users these elements had display: none; and probably never ran the opacity transition.

The strange thing is that the transitions was on exactly two elements. So why would this only crash on long threads with 100+ comments?

So the bottom line is: -webkit-transition crashed the page on mobile safari.

ipad memory issue loading images in UIWebView

FWIW, I solved this by swapping bg image on the containing div rather than using an img element and swapping its src.

So either it's a bug that memory management doesn't allow more than x MB of images loaded, or it's a bug that bg images don't count towards that total.

Ho-hum.

iOS 9 safari webkit crash only on iPad (iPhone works fine)

I believe i found the bug...

Aparently Safari 9 (iPad only) does not like it when you apply css transform:translate3d(); on an element containing a css background-image:url(), with a z-index:-1;

• Removing the translate3d improved the issue, but performance was
  horrible and still got random crashes.

• Removing the background-image solved the issue completely, but was a
  requirement.

• Finally, i was able to keep the backgound-image and the translate3d
  as long as i removed the z-index.

So in short, if you are getting consistent crashes in Safari 9 on ipad only then try and remove all negative z-index's and see if that fixes it.

Why does simple website crash on mobile (iOS Safari and Chrome, at least)?

I think I fixed it!

The problem, as suspected, was rendering/painting caused by CSS layout. At phone-size, I had been hiding the content of each entry until it was selected; and the method I had been using to hide them, and remove any trace of them from the layout, included position: absolute. I didn't initially use display: none because of typical concerns about wanting to not see content but keep it there, for various readers and reasons. I threw those concerns aside and changed the layout so that the entries were hidden with display: none and shown with display: block -- and that seems to have fixed the crashing.

I think the absolute positioning was stacking a huge amount of content in the corner of the screen, and although it wasn't visible, it was demanding memory.

What clued me in to trying this was an answer to another related question, linked to above by @tea_totaler: https://stackoverflow.com/a/14866503/2284669. It says:

What tends to help me a lot is to keep anything that is not visible at this time under display: none. This might sound primitive but actually does the trick. It's a simple way to tell the renderer of the browser that you don't need this element at this time and therefore releases memory. This allows you to create mile long vertical scrollers with all sorts of 3d effects as long as you hide elements that you are not using at this time.

I think that my other hiding method was not releasing memory, despite its other advantages (which were possibly irrelevant to this particular site anyway). I'm sure it became a problem only because the site was so long.

That's something to consider, though, when you want to hide an element: rendering/memory demands.

---

Related Topics