New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive iframes on iOS do not size correctly (workaround included) #11133

Closed
poscar opened this Issue Aug 30, 2017 · 5 comments

Comments

Projects
None yet
4 participants
@poscar
Copy link
Contributor

poscar commented Aug 30, 2017

What's the issue?

Responsive iframes are not sized correctly on iOS causing embedded video players to be scrollable and clipped due to content being sized larger than the container.

How do we reproduce the issue?

  1. Go to the JSBin here on a 4.7" iPhone iOS Safari:
  2. Scroll down to the first video iframe embed.
  3. Observe how the embed is sized incorrectly, and you can actually scroll the video player within iframe.

Inspecting Desktop Safari simulating an iPhone 6S

Observe the differences between the container dimensions and the contained iframe.
screen shot 2017-08-30 at 9 10 54 am
screen shot 2017-08-30 at 9 10 40 am

Inspecting iOS Safari on 4.7" iPhone 7

Observe the differences between the container dimensions and the contained iframe.
screen shot 2017-08-30 at 9 04 55 am
screen shot 2017-08-30 at 9 04 38 am

What browsers are affected?

Tested Safari on a 4.7" iPhone 7 with iOS 10.3.3(14G60)

Which AMP version is affected?

Powered by AMP ⚡ HTML – Version 1503591987101

Workaround:

Adding the following CSS rule seems to fix the problem:

  iframe.i-amphtml-fill-content {
    height: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 0;
  }

As can be observed in the JSBin here.

EDIT the workaround above doesn't validate, but this one does:

  .amp-active {
    iframe {
      height: 0;
      max-height: 100%;
      max-width: 100%;
      min-height: 100%;
      min-width: 100%;
      width: 0;
    }
  }
@KrzysztofPrzygoda

This comment has been minimized.

Copy link

KrzysztofPrzygoda commented Apr 10, 2018

Hi guys!
This workaround unfortunately prevents iframe to be scrolled at all.
If you need to workaround overflow bug but preserve iframe content scroll ability look at my current findings in this Gist or JSBin.

@jridgewell

This comment has been minimized.

Copy link
Member

jridgewell commented Apr 10, 2018

@KrzysztofPrzygoda Your gist and jsbin contain far too many extraneous bits for me to understand the differences.

@KrzysztofPrzygoda

This comment has been minimized.

Copy link

KrzysztofPrzygoda commented Apr 10, 2018

@jridgewell It can't be simpler than this JSBin. In short: you need 2 containers - one as a boundary (fixed size) and second as a scrolling area. Any further explanations I've covered in CSS comments.

@jridgewell

This comment has been minimized.

Copy link
Member

jridgewell commented Apr 10, 2018

Now I understand.

The issue with this approach is that the iframe's resizes to the full size of the document it contains. This breaks position-fixed elements inside the iframe (for instance, change the div.pre-content.heading-holder to use position:fixed; top: 0px;) since the document's viewport is equal to the document's size, not the viewport's size.

This is a much more difficult problem to solve (it requires a lot of JS and DOM hacks) than getting the iframe's document to be scrollable (requires a scrollable <body> and -webkit-overflow-scrolling: touch).

@digitalmaniak

This comment has been minimized.

Copy link

digitalmaniak commented Sep 25, 2018

The workaround worked like a charm. I've been having this issue for some time. Thank you so much for this ^____^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment