Responsive iFrame Embeds on iOS

I restyled this site today with the hope of using this blog a little more, and posting some code.

I’ve been using JSFiddle for a while now for exploring and “fiddling”, and their embedding feature is great.

iOS, however, had other plans.

Pulling up the post on my iPhone looked something like this:

Outset iFrame

Outset iFrame

The iframe breaks out of the frame, and causes all sorts of scrolling issues.

This is unique to Mobile Safari, as far as I can tell. If the content of the page is larger than the iframe, the iframe expands, even if you explicitly tell it not to. After an hour or so of searching, I finally found this StackOverflow answer, which solved most of my problems.

The solution requires two parts:

First, add the following CSS to your iframes:

iframe {
  width: 100px;
  min-width: 100%;
}

Second, add scrolling="no" to your iframe tag. This second part has me slightly concerned, but thus far, I haven’t come across any issues. We’ll see if that holds.

As a result, if I repost the same iframe below, but including scrolling="no" on the iframe, you should see a fairly well formatted iframe below:

Works for me.

Posted February 1, 2015 at 12:35AM