iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability

Question

I'm developing a webapp and I've got a div inside of an iFrame that has hidden, overflowed content that I want to be scrollable.

On Safar on iOS 9 when I add -webkit-overflow-scrolling:touch; to the div (that already has overflow-y: scroll; to give the scroll a fluid feel, it breaks and doesn't scroll at all.

I know that this is a known issue but I haven't found solutions relevant to my scenario: I have iFrames that do more than transmit data, they actually contain content for the user. Orientation doesn't matter, the content will always need to be scrollable.

Have you tired specifying overflow-y in the body tag like this body {overflow-y: scroll;} that might work as it will applied through out the site instead of just on a single div — brent_white
– brent_white, Commented Oct 1, 2015 at 23:57
Were you able to solve this yet? Post a fiddle up so I can see the issue. — brent_white
– brent_white, Commented Oct 4, 2015 at 1:09
@BrentWhite it's hard for me to show a fiddle as this is a big nest of iframes — Zach
– Zach, Commented Oct 10, 2015 at 0:36

Christopher Camps · Accepted Answer · 2015-10-08 19:53:23Z

17

I just ran into this issue with dynamic content within a div that had overflow: auto and -webkit-overflow-scrolling: touch.

Dirty, ugly workaround: force the content inside to be bigger than the scrolling div when added to dom. Something like this:

<div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <div style="min-height: 101%">
        dynamic content
    </div>
</div>

My theory is that Safari tries (needs) to do some heavy optimizations when -webkit-overflow-scrolling: touch is added, and these don't play nice with some types of dynamic content.

answered Oct 8, 2015 at 19:53

Christopher Camps

1,3032 gold badges9 silver badges10 bronze badges

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

1 Comment

MarcoLe Over a year ago

In 2019: I still run into the same issue. Is there any progress for fixing this in safari or an alternative solution approach?

Thomas Kelly · Accepted Answer · 2015-11-06 01:45:47Z

1

I also ran into this issue with webkit-overflow-scrolling: touch on iOS9. It can be reproduced on an device or the iOS simulator. As Christopher Camps mentions, it only happens with dynamic content, i.e. content that changes from being smaller then the scrollable container to larger then the container.

Heres a CodePen demonstrating this issue, including Christopher Camps fix.

answered Nov 6, 2015 at 1:45

Thomas Kelly

214 bronze badges

Comments

stracktracer · Accepted Answer · 2016-11-07 09:24:02Z

0

It seems another hack for this Safari bug is to use javascript to set a style="overflow: none" and reset it back to its previous value immediately after.

answered Nov 7, 2016 at 9:24

stracktracer

1,9085 gold badges24 silver badges38 bronze badges

Collectives™ on Stack Overflow

iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related