title: Safari Mobil iFrame content out of view not rendered
body: <h2>Problem</h2>
  
  <p>Open <a href="https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/" rel="nofollow noreferrer">https://run.plnkr.co/preview/cjt4eonvv00043e5jhlqw9olb/</a> on iPhone and  the second iFrames <code>div</code> content ist not shown before tapping/scrolling.</p>
  
  <p>Video: <a href="https://youtu.be/opEx0HMBvWc" rel="nofollow noreferrer">https://youtu.be/opEx0HMBvWc</a></p>
  
  <h2>Details</h2>
  
  <p>I have a widget <code>&lt;iframe&gt;</code> that is rendered below the page fold on page load.</p>
  
  <pre><code>&lt;iframe class="iframe" src="widget.html"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>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 <a href="https://stackoverflow.com/a/32993873/9619535">https://stackoverflow.com/a/32993873/9619535</a>.</p>
  
  <p>The alternative is to make the <code>iframe</code> scrolling inside with <code>position:fixed</code> etc. as described here: <a href="https://github.com/PierBover/ios-iframe-fix" rel="nofollow noreferrer">https://github.com/PierBover/ios-iframe-fix</a> / <a href="https://stackoverflow.com/a/54988720/9619535">https://stackoverflow.com/a/54988720/9619535</a></p>
  
  <p>But the content of this div is not rendered if the <code>iFrame</code> is out of view on page load. Only after the first touch the content appears:
  <a href="https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6" rel="nofollow noreferrer">https://gist.github.com/arichter83/a056b127a7ebd3cb04062f172cb45df6</a></p>
  
  <p><img src="https://i.stack.imgur.com/Qqsd2.jpg" width="400"></p>
  
  <h2>Debugging</h2>
  
  <p>Using <strong>XCode Simulator</strong> the bug can also be reproduced. With Safari Inspect the element is there and all css seems fine:</p>
  
  <p><a href="https://i.stack.imgur.com/3AJkC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3AJkC.png" width="500"></a></p>
  
  <h2>Workarounds!?</h2>
  
  <p>The bug does not appear when using <code>-webkit-overflow-scrolling: auto;</code> instead of <code>touch</code>, but the momentum scrolling is desired / essential for the haptic usability.</p>
  
  <h2>Related questions</h2>
  
  <p>Also linked here: <a href="https://github.com/PierBover/ios-iframe-fix/issues/5" rel="nofollow noreferrer">https://github.com/PierBover/ios-iframe-fix/issues/5</a></p>
  
  <p>These solutions didn't help:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/8912218/iframe-content-not-rendering-under-scroll-in-ios5-ipad-iphone">Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone</a> -> <code>webkit-transform: translate3d(0, 0, 0);</code> did not change it</li>
  <li><a href="https://stackoverflow.com/questions/44503618/safari-ios-iframe-blank-screen-on-rotate?rq=1">Safari ios iframe blank screen on rotate</a> -> no <code>display:flex</code> is used</li>
  </ul>