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

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:

Example of how it should look:

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

• https://guidetoiceland.is/connect-with-locals/regina/the-magical-snaefellsnes-peninsula/amp

Search result that will cause the issue:

• https://www.google.is/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=snæfellsnes&oq=snæ&aqs=chrome.0.69i59j69i61j69i57j0j69i61l2.1266j0j7

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

• https://www.youtube.com/watch?v=s7Rl_p8cYUc

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:

• https://bugs.chromium.org/p/chromium/issues/detail?id=687317

What browsers are affected?

Chrome 55 on iOS.

Which AMP version is affected?

1485231782273