CODEWITHSUNDEEP
htmlioscssiframescroll
IceLady
IceLady

Reputation: 186

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:

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>

Upvotes: 9

Views: 12810

Answers (4)

Tom Hickman
Tom Hickman

Reputation: 11

I've been having this issue for some time now and finally found a fix that works for me by reducing the width of the div disappearing in the iframe. Mine was 100% and reducing to 95% solved it. I'm not sure about the actual max width in px but I think it has to be less than the width of the screen. I tried all the css tricks you mentioned and more, but this is the only thing that has worked.

Upvotes: 0

Chef
Chef

Reputation: 683

To fix this. You need to specifically set height on the iframe.

    .wrapper {
      -webkit-overflow-scrolling: touch;
    }
    <div class="wrapper">
      <iframe
        style="height: 500px"
      ></iframe>
    </div>

The hardest part is to get content height of the iframe. You can let iframe tell the parent page by using window.postMessage if you own the iframe. Otherwise you need to check height periodically until you think it is fixed.

var iframe = document.querySelector('iframe');
var setHeight = function(height) {
  iframe.style.height = height + 'px';
};
var getHeight = function() {
  return iframe.getRootNode().body.scrollHeight;
};
var prevHeight = 0;
var adjustHeight = function() {
  var height = getHeight();
  if (prevHeight !== height) {
    prevHeight = height;
    setTimeout(adjustHeight, 2000);
  } else {
    setHeight(height);
  }
};
setTimeout(adjustHeight, 2000);

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44145

It might be worth including some external JavaScript with a media query to fix this issue, it's currently being applied to every single display.

Upvotes: 1

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

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>

Upvotes: 5

Related Questions