iOS browser crashing when using -webkit-overflow-scrolling: touch;

5
votes

When making a scrollable div, for iOS devices, momentum scroll doesn't work - so you must use the 'beta' -webkit-overflow-scrolling: touch; property.

However, this seems to crash the browser for me - not immediately, but seemingly randomly. Removing all of the -webkit-overflow-scrolling: touch; properties stop the browser from crashing.

I've tried using iScroll, touchSwipe, and a few other plugins that I can't remember the name of, but have either been too cumbersome to implement (I have a very short timeframe for development) or haven't worked as desired.

Does anyone experience the same problem, and if they have, have you found a solution?

3
iosipadcss
-webkit-overflow-scrolling: touch; works from iOS 5.1 and higher. It's got a huge performance boost on iOS 6. On iOS 5 the performance is quite bad, so when using this on multiple items on a single page or using it together with 3D translation may cause the browser to crash. - insertusernamehere

3 Answers

3
votes

I happened to me on bigger list with about over 100

  • elements. When I removed it it works, but without the momentum scrolling ofcourse.

    I tested on iOS5 and latest iOS6, on both an iPod Touch 4.1 and iPad 2, it seems that on the Touch I get the Safari crash more often, but on the iPad it also happens.

    It seems like an Apple bug they didn't properly solve.

    • 2
    votes

    I noticed this happening when I had it applied to multiple elements on the page... I dropped it down to being applied only on the "active" div, and it doesn't crash anymore. Lame.

    -1
    votes
    let content = document.querySelector(".content");
if (content.scrollTop <= 0) {
    content.scrollTop = 1;
} else if (content.scrollTop >= content.scrollHeight - content.clientHeight) {
    content.scrollTop = content.scrollHeight - content.clientHeight - 1;
}