amphtml: amp-iframe resize request broken on iOS
What’s the issue?
We have an issue where resizable amp-iframe
would not resize when the iframe is loaded. The message to resize is sent properly but the resize is not applied until the user clicks or interacts with the amp-iframe.
These are the messages that are been received to post a new messages and change the height of the iframe.
{
data: { height: 4037 }
name: "resize"
scope: "host"
sender: "dsq-app6849"
}
How do we reproduce the issue?
We are defining an amp-iframe
with initial height 300. The iframe content is eventually 4037px high and requests an iframe resize using the embed-size
message.
<amp-iframe width="600" height="300" layout="responsive"
sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" resizable="" frameborder="0"
src="${disqusURI}">
<div overflow="" tabindex="0" role="button" aria-label=""></div>
</amp-iframe>
Content of the iframe:
<div id="disqus_thread"></div>
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
if (event.data) {
var msg;
try {
msg = JSON.parse(event.data);
} catch (err) {
// Do nothing
}
if (!msg)
return false;
if (msg.name === 'resize' || msg.name === 'rendered') {
window.parent.postMessage({
sentinel: 'amp',
type: 'embed-size',
height: msg.data.height
}, '*');
}
}
}
</script>
What browsers are affected?
All browsers.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 24 (5 by maintainers)
Thanks, we’ll try to contribute an update to that code sample that adds an overflow button.
@choumx We are using code like this:
and css for it: