iOS scrolling problems in embedded website with iframe

Question

I am having a problem with iframes on iOS (Safari).

We're using a webpage within our webpage through an iframe - it looks great on PC & on Android, but on iOS the whole view is broken and I can't get the scrollable iframe to work on iOS anymore.

We used to fix the iOS scroll issue outside of the iframe itself (in a div) with:

   overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: fixed;

Unfortunately, this isn't working anymore so we took it out. This is how the iframe looks right now:

    <div class="nobottommargin">

            <p><iframe style="height: 500px; width: 100%; border: none; top: 0; left: 0;" src="https://url.com" scrolling="yes" allowfullscreen="yes" width="320" height="240"></iframe></p>
    </div>

Any idea on how to fix this issue or what other alternatives could be used here?

Edit: what I also tried, without any success:

• touch-action: auto on the iframe tag
• scrolling="no" on the iframe tag
• pointer-events: none

Edit 2: Scrolling is working now BUT while scrolling down, it's cutting my iframe off in the middle. Issue only on iOS again (looks fine on Android & PC).

Here's the working iOS scrolling code with the iframe crop bug that I have:

<div class="scroll-container scroll-ios" style="height:500px;width: 100%; position:relative">
    <div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;min-width:50%;min-height:50%;max-height:500%;top:0;left:0;-webkit-overflow-scrolling: touch !important;overflow-y:scroll !important">
            <iframe id="iframe_test" src="url.com" style="height: 100%; width:100%;min-width:100%;" name="myiFrameFix" allowfullscreen="yes" scrolling="yes">   </iframe>
    </div>
</div>

Edit 3: What I also tried was, removing all the CSS that tricks the browser into using the GPU:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

This didn't fix the iframe iOS bug either unfortunately (tried with iOS 9 & 11).

Edit 4: Tried to fix the iframe cropping issue with a script, to make the height of the iframe the same as the whole body. Once again, I was unsuccessful.

<script>
    $(function() {
        var iframe = $("#iframe_test");    
        iframe.load(function() {
            $("body").height(iframe.height());
        });
    });
</script>

Answer 1

Check this on your iPhone the scroll works smoothly.

.nobottommargin {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
iframe {
  height: 100%;
  width: 100%;
  border: none;
  display: block;
}

<div class="nobottommargin">
  <iframe src="http://www.weather.gov/" frameborder="0">
</iframe>
</div>