-webkit-overflow-scrolling causing mobile safari to crash

As a web developer, have you ever had that problem that was really hard to track down? I recently ran into such a problem. I was working on a site and when you went to one part of the site it would crash mobile safari on my iPad I was testing on.

I would never have guessed that css would cause the whole browser to crash. Come to find out it was the css property of ‘-webkit-overflow-scrolling’ on a div I had. Inside the div there were hundreds of rows of data that displayed in their own inner divs. It looks like that someone had a z-index issue within the div and a common solution for this was to use the ‘-webkit-transform: translate3d(0, 0, 0);’ property on all child elements. When I did some investigation apparently these properties activate some hardware acceleration. Unfortunately for me the iPad I was using was an older model with very limited resources. So this caused my crashes.

Other iPads I tested on had some slow down, but didn’t crash. When trying to resolve the issue, removing -webkit-overflow-scrolling on the parent div stopped the crashing. Unfortunately without the div wouldn’t have the native scroll. So I removed the -webkit-transform property. When I did this the page was snappier and didn’t crash. I had to reorganize some of my html structure to make sure everything showed up appropriately, but I ended up with what I needed.

It took me forever to discover the cause of mobile safari crashing, so I just wanted to put this out there to share with others. If you are having webpage performance issues or crashes and use -webkit-overflow-scrolling with any of the webkit css properties that enable hardware acceleration, you might have the same problem I did. This is more noticeable when you have a large data set for child elements.

Facebook comments:

Fedil

I was originally born in Missouri, but traveled around most of my childhood. My mom finally got tired of moving while we were in Dallas, Texas and I have been here ever since. After high school I started college at the University of North Texas (UNT) and started working in the computer field. I currently work for JCPenney as a front end software engineer for their e-commerce website. Before this I worked for AT&T about 12 years and started with them in 1999 (when they were Southwestern Bell). I have many passions and I really love photography. Besides photography I also love sports. I not only like to watch it, but I also love to play. Currently my friends and I play indoor soccer and flag football.

Leave a Reply

Your email address will not be published. Required fields are marked *