Iframe that's vertically scrollable and responsive in both ios safari and desktop chrome?

Question

How can I have an iframe containing a large, responsive page inside of it that behaves properly for both desktop chrome and ios safari (assuming I don't control the iframe content)? Consider a simple example:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    html, body, iframe {
      width: 100%;
      height: 100%;
    }
    </style>
  </head>
  <body>
    <iframe src='https://en.wikivoyage.org/wiki/S%C3%A3o_Paulo/Northeast'></iframe>
  </body>
</html>

This is pretty simple: a full-with and full-height iframe pointed at a misc large, responsive page. The behavior I see:

Desktop chrome: good. The wikivoyage pages is desktop-sized and scrollable.
Desktop chrome in iphone emulation mode: good. The wikivoyage page is responsively-resized and scrollable.
Actual Ios Safari (both physical phone and xcode iphone simulator): bad. The wikivoyage page does not responsively resize– it shows the desktop-style page inside the iframe, which of course stretches way off the side of the page:

Now, I can fix that last problem by adding scrolling='no' to the iframe as suggested in a number of stack overflow questions:

<iframe src='https://en.wikivoyage.org/wiki/S%C3%A3o_Paulo/Northeast' scrolling='no'></iframe>

This works correctly on the iphone + ios simulator: the wikivoyage page is scrollable and responsively resized. Predicatably, though, it breaks desktop chrome: the wikivoyage page isn't vertically scrollable there. That makes sense– we just told it not to scroll.

It's entirely possible I'm just missing something in related questions like this one, but the accepted solution seems to suggest using scrolling='no', which just breaks scrolling. :(

TLDR: How can I get an iframe that's vertically scrollable and responsive in both ios safari and desktop chrome?

Fishtoaster · Answer 1 · 2017-05-03T05:56:23.030

Alright, a hacky solution I've come up with is to just have two iframes: one with scrolling='no' and one without, then just show the appropriate one on mobile:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html, body, iframe {
        width: 100%;
        height: 100%;
      }
      @media (max-device-width: 740px) {
        .desktop-iframe { display: none; }
      }
      @media (min-device-width: 741px) {
        .iphone-iframe { display: none; }
      }
    </style>
  </head>
  <body>
    <iframe class='iphone-iframe' scrolling='no' src='https://en.wikivoyage.org/wiki/S%C3%A3o_Paulo/Northeast'></iframe>
    <iframe class='desktop-iframe' src='https://en.wikivoyage.org/wiki/S%C3%A3o_Paulo/Northeast'></iframe>
  </body>
</html>

Now, this does result in two requests to the iframe's webserver. That'll induce some additional load and probably slow the page down a bit. It seems better than any other option css-only soulution, though.

Iframe that's vertically scrollable and responsive in both ios safari and desktop chrome?

1 Answers1