AMP fixed header on Chrome iOS has incorrect position when in an iFrame
See original GitHub issueShort 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?
- Create an AMP page with a header with
position:fixed; top:0;
CSS. - Get the result indexed
- Search for the page on Chrome in iOS
- Make sure the location bar is not displayed (only scroll down)
- Click on the search result
- 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:
Example of how it should look:
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:
- Created 7 years ago
- Comments:30 (14 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
someone fix this?
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