Hi,
Setting up iframes in the document body, AMP throw randomly an error with the content of the iframe:
<amp-iframe> elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller): amp-iframe#AMP_13 Current position -1198. Min: 480Positioning rules don't apply for iframes that use `placeholder`.See https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md#iframe-with-placeholder for details.
We cannot understand this, because the iframe itself is more than 600px from the top of the document. And the current position show in the error message is just weird (-1198).
Why this error message is throw? Should we only put a placeholder?
Anyway, I think there is a problem in the position calculation…
Could you provide a URL that shows this problem? Maybe on jsbin.com?
Providing a placeholder is certainly recommended.
You can find an example here:
https://jsbin.com/qivipezija/1/edit?html,console,output
But in that example the iframe is not 600px away from the top of the document. Providing a placeholder would fix your problem.
E.g. if you want to load a video player, use the video's poster image as the placeholder.
I did it too fast, my bad.
You can find another one there:
https://jsbin.com/buhecemape/1/edit?html,console,output
I found how to reproduce the issue, it occurs when I reload the document after scrolling to the iframe. The browser keeps the scoll position when reloading content.
This is caused by
html, body {
height: 100%;
}
You can fix your doc by removing that rule and we will keep this open to make sure AMP is robust against this case.
Most helpful comment
But in that example the iframe is not 600px away from the top of the document. Providing a placeholder would fix your problem.
E.g. if you want to load a video player, use the video's poster image as the placeholder.