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.

Answer 1

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.

Answer 2

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.