-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.
