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)

Most upvoted comments

Thanks, we’ll try to contribute an update to that code sample that adds an overflow button.

dreamofabear on Jul 22, 2019

@choumx We are using code like this:

<amp-iframe id="ampdisqus" width="600" height="300"
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
    resizable
    frameborder="0"
    src="">
    <div overflow tabindex="0" role="button" aria-label="Load comments"><span class="btn">Load comments</span></div>
    <div placeholder><span class="btn">Load comments</span></div>
</amp-iframe>

and css for it:

#ampdisqus div[overflow],
#ampdisqus div[placeholder] {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
}
#ampdisqus div[overflow] span,
#ampdisqus div[placeholder] span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

maciejmackowiak on Jul 23, 2019