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

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.

Answer 3

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.