CODEWITHSUNDEEP
javascriptioscssipadwebkit
Arctelix
Arctelix

Reputation: 4576

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

I have a web app using python/django back end and uses a decent amount of CSS3 animation, and heavy javascript on the front end. This issue is driving me a bit nuts so i just wanted to see if anybody had any ideas on this.

The site crashes webkit on iPad mini running iOS 9.2. Both safari and chrome crash. Safari provides the following notice:

A problem occurred with this webpage so it was reloaded

The crash occurs just after the content shows up before touching anything. Sometimes it will reload until:

A problem repeatedly occurred on ...

Other times it will eventually load the page and then after scrolling the page it crashes. On some rare instances the site will work after clearing the browser cache.

It works perfectly on these devices:

There are no apparent memory leaks as shown in the timeline which includes page load and scrolling through the site content which adds javascript objects and elements to the dom dynamically: Page load and scrolling through site

General procedure causing the issue:

Upvotes: 3

Views: 2576

Answers (1)

Arctelix
Arctelix

Reputation: 4576

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.

Upvotes: 4

Related Questions