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

Question

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?

-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
– insertusernamehere, Commented Oct 1, 2012 at 15:03

Philip Sultanescu · Accepted Answer · 2012-10-07 22:36:36Z

3

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.

answered Oct 7, 2012 at 22:36

Philip Sultanescu

461 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Alex K · Accepted Answer · 2013-05-23 21:56:23Z

2

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.

answered May 23, 2013 at 21:56

Alex K

16k4 gold badges34 silver badges33 bronze badges

1 Comment

Ben Over a year ago

same here. getting deeper into iOS webapp dev; those fancy css things are a pain in the ass. sad but real true.

Cody Gray · Accepted Answer · 2017-10-26 12:20:33Z

-1

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;
}

edited Oct 26, 2017 at 12:20

Cody Gray♦

246k53 gold badges513 silver badges591 bronze badges

answered Oct 26, 2017 at 10:52

YinPeng.Wei

5984 silver badges10 bronze badges

1 Comment

Cody Gray Over a year ago

While this code snippet may solve the problem, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related