Safari Mobil iFrame content out of view not render

Question

Problem

Open https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/ on iPhone and the second iFrames div content ist not shown before tapping/scrolling.

Video: https://youtu.be/opEx0HMBvWc

Details

I have a widget <iframe> that is rendered below the page fold on page load.

<iframe class="iframe" src="widget.html"></iframe>

It is loading a site under my control, where I want a sticky/fixed element on top and momentum scrolled content below. Because of the fixed element I can not apply a wrapping div in the parent page and simulate the scrolling as described here https://stackoverflow.com/a/32993873/9619535.

The alternative is to make the iframe scrolling inside with position:fixed etc. as described here: https://github.com/PierBover/ios-iframe-fix / https://stackoverflow.com/a/54988720/9619535

But the content of this div is not rendered if the iFrame is out of view on page load. Only after the first touch the content appears: https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6

Debugging

Using XCode Simulator the bug can also be reproduced. With Safari Inspect the element is there and all css seems fine:

Workarounds!?

The bug does not appear when using -webkit-overflow-scrolling: auto; instead of touch, but the momentum scrolling is desired / essential for the haptic usability.

Related questions

Also linked here: https://github.com/PierBover/ios-iframe-fix/issues/5

These solutions didn't help:

• Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone -> webkit-transform: translate3d(0, 0, 0); did not change it
• Safari ios iframe blank screen on rotate -> no display:flex is used

Answer 1

First setting -webkit-overflow-scrolling: auto; and then switching to touch after the first touch seems to work 90%:

<script type="text/javascript">
const el = document.getElementsByClassName('scrollable')[0]
const settouch = (e) => el.style.webkitOverflowScrolling = 'touch' 
el.addEventListener("touchend", settouch, false);
</script>

But 10%: if the iFrame is rendered below the fold and the user scrolls upwards where the iFrame does not react (already on top of page), the containing page will scroll, the touchend will fire and the div will not be rendered anymore.

See video here: https://youtu.be/opEx0HMBvWc

Answer 2

The problem came from https://github.com/PierBover/ios-iframe-fix 's position:fixed;top:0px etc.

The same can be achieved with height:100% on the wrapper, and than the bug doesn't occure:

  .scrollable {
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }

via https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios