Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS scrolling problems in embedded website with iframe

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>
like image 652
IceLady Avatar asked Jun 07 '18 15:06

IceLady


People also ask

How do I enable scrolling in iframe?

1) Set the scrolling attribute of the iframe to no (scrolling="no"). This will disable both horizontal and vertical scroll bars. 2) Set the width attribute of the iframe to 200% (width="200%"). This will enable only the horizontal scroll bar.

Why does my iframe have scroll bars?

In a web browser, if the content of an IFRAME is longer or wider than the space afforded to it by the parent page, the window will automatically display scroll bars. While this behavior is sometimes desirable, in most cases it should be avoided.

Does HTML5 support scrolling attribute?

The <iframe> scrolling attribute is not supported in HTML5. Use CSS instead. The scrolling attribute specifies whether or not to display scrollbars in an <iframe>. Normally, scrollbars appear in an <iframe> when the content is larger than the <iframe>.


1 Answers

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>
like image 175
Shahil M Avatar answered Oct 27 '22 11:10

Shahil M