css - 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.