Using an iPhone iOS10 in Safari, I can scroll the page and overflowed elements fine at 100% zoom.
When I zoom in, I can no longer scroll overflowed elements. The page is scrolled instead.
It appears that this issue occurs more frequently the further I've zoomed in. If I only zoom a bit, it happens less frequently.
I am using -webkit-overflow-scrolling: touch; Removing that property will cause undesired jumping on scroll.
I've tried adjusting the element's height to 100vh vs auto vs window.innerHeight, adjusted the z-index, set it to position:absolute;
Nothing is working! Again, this only happens on zoom. Scrolling works fine at 100%.
I've seen previous threads on this issue but no solutions so far:
iOS 8 Safari - Can't scroll element's content when page is zoomed
Is there a workaround for bug in Mobile Safari: Pinch to Zoom results in random scrolling blockage?
Issue scrolling div with Safari on iPhone 6+, iPad 3 when zoomed in
