question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AMP fixed header on Chrome iOS has incorrect position when in an iFrame

See original GitHub issue

Short description of the issue

When viewing Google AMP results on Chrome iOS, there is a bug where the header disappears when I click on an AMP result with a header that has position:fixed; top:0; CSS.

How do we reproduce the issue?

  1. Create an AMP page with a header with position:fixed; top:0; CSS.
  2. Get the result indexed
  3. Search for the page on Chrome in iOS
  4. Make sure the location bar is not displayed (only scroll down)
  5. Click on the search result
  6. You’ll see that the header is “calculated” to be below the google bar, but is hidden by the height of the location bar.

Example:

img_0719

Example of how it should look:

iphone-amp-correct

Public URL (works fine if you access it directly):

Search result that will cause the issue:

Here is a screen recording of where I reproduce the bug:

I’m not sure if this is a bug with the AMP recalc JS or Chrome on iOS, so I created a bug report on crbug.com as well:

What browsers are affected?

Chrome 55 on iOS.

Which AMP version is affected?

1485231782273

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:30 (14 by maintainers)

github_iconTop GitHub Comments

1reaction
noahnavacommented, Jul 4, 2018

someone fix this?

1reaction
mauricionrcommented, Jul 20, 2017

I have the same problem with amp fixed header using chrome on ios but when using amp-lightbox

the amp fixed header hide the content

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

IFrame height issues on iOS (mobile safari) - Stack Overflow
This issue is caused by the iOS Safari, it will auto-expend the hight of iframe to fit the page content inside. If you...
Read more >
amp-iframe - layout="fixed-height" - Safari Browser Bug? #4540
Hello, i have a special problem with amp-iframe and responsive content. The content of the original page is responsive: ...
Read more >
Strategies for the iFrame on the iPad Problem - Magnolia CMS
Another strategy is to just let the iframe expand and fill the page, but surround it with position:fixed elements such as a header,...
Read more >
HTML Video element, not working after iosSafari15 update
Same here, seems like iOS 15 has broken the <video> element, except for me, ... passing a video from fixed to absolute position...
Read more >
5 common mistakes with rel=canonical - Google Developers
Mistake 2: Absolute URLs mistakenly written as relative URLs. Example for incorrect rel-canonical markup: wrong relative URLs. The <link> tag, like many HTML ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found