1

Update: It turns out Apple just silently prevents you from having a fixed-size iframe in iOS. Awesome. How to get an IFrame to be responsive in iOS Safari?

I am trying to do something I expected to be really simple: embed a fixed-size <iframe> inside an absolutely-positioned div.

This is running on WKWebView on an iPad.

No matter what I try (and I've tried everything I can think of), it will not respect the size I tell it to be, and instead always auto-sizes its height to match its contents.

I'm just trying to figure out how to stop this.

Here are the CSS attributes, taken right from Safari while connected to the iPad:

enter image description here

The <iframe> element itself also has its height and width attributes set to the same values:

enter image description here

But as you can see from the Computed view, it is completely ignoring all attempts to set its height and ends up rendering like this:

enter image description here

What in the world is going on? It is causing my web app to scroll way out of the bounds of what should be its fixed screen size. I've been fighting this thing for over an hour and have made zero progress.

devios1
  • 36,899
  • 45
  • 162
  • 260

1 Answers1

1

You should be able to just set the overflow to hidden. This will clip to the set size. I wouldn't use the iframe though. They are considered obsolete in page layouts.

John Lord
  • 1,941
  • 12
  • 27
  • I'm still having no luck with overflow either. Is there a better way to embed a remote page in a div these days than iframe? – devios1 Nov 05 '18 at 22:49
  • Literally not one single thing I've tried has had any effect on the height of this iframe. God how I missed CSS. – devios1 Nov 05 '18 at 22:57
  • It appears this is just the way iframes are on iOS. Amazing. I did, however finally get it to manage to scroll the overflow properly by setting `overflow: scroll;` and `-webkit-overflow-scrolling: touch;` on the parent div. – devios1 Nov 05 '18 at 23:12
  • i found a reference claiming that because it's an included webpage, you can't set any kind of overflow besides hidden. It's a security risk because pages could overflow your frame and overlay your text boxes with their own to steal information. Personally i think this is stupid though since they could break out of the frame completely and replace your entire page with something that looked identical with simple javascript. – John Lord Nov 06 '18 at 20:08
  • I ended up ditching the iframe and implementing it in native code. It was a hundred times easier. – devios1 Nov 06 '18 at 20:10