sizeToParent:true does not always work

Confluence Development Confluence Cloud
,
1

Atlassian Connect modules have three resizing modes, which are configured through the data-options attribute on the all.js script tag (or any element with the ID ac-iframe-options):

  • The default is to automatically resize the iframe to the size of its <div class="ac-content"> element.
  • Specifying resize:false will disable any automatic resizing, the iframe will have no dimensions set by default. It can be resized manually using AP.resize() or AP.sizeToParent()
  • Specifying sizeToParent:true will give the iframe 100% width and a height in pixels that matches the whole available space. A resize listener is enabled that will update the height when the browser window is resized.

The sizeToParent:true option does not always work. On some systems it always works, but on some systems the iframe stays without any assigned dimensions at least on every other page load. This causes confusion for users, since parts of the content are not visible. The problem has been around for many years and impacts the usability of several of our apps. It has also been reported here:

After debugging this for several hours, I believe I have found an explanation and a workaround. The whole AP module, including its resizing behaviour, is controlled by a complex and confusing interaction between atlassian-connect-js and simple-xdm. The communication between the iframe and the host product is done using message events. When all.js loads, simple-xdm sends an init message to the host product. Then, in the same tick, atlassian-connect-js sends a sizeToParent message to the host product.

My suspicion is that in some scenarios, the two messages arrive in the opposite order, because the order in which messages are received is not guaranteed. As an experiment, I switched the two messages around. Sending the init message before the resizeToParent message (like the code currently does) almost always succeeded to resize the iframe, but sending the resizeToParent message before the init message almost never succeeded to resize the iframe.

As a workaround, I am waiting for the response of the init message before enabling sizeToParent:

<script src="https://connect-cdn.atl-paas.net/all.js" defer data-options="resize:false"></script>
<script>
    window.addEventListener('message', (e) => {
        if (window.AP && e.data?.type === 'init_received' && e.origin === AP._data.origin && e.source === AP._host) {
            AP.sizeToParent();
        }
    });
</script>

We have been using this workaround for a while now and it seems to reliably solve the problem.

I believe that Atlassian should change the code so that atlassian-connect-js either waits for the init_received message before calling sizeToParent(), or change the mechanism so that sizeToParent() works even if no init message has arrived.

4 Likes
2

Hi

I notice you’re using the defer attribute on the script tag.
Can you confirm whether the bug still occurs without using the defer attribute, as this is not a supported use case by the all.js script.
If it was just for the demonstration of adding the event listener to the message, then please disregard this message.

3

Hey,

Unfortunately I cannot test whether removing the defer attribute will change anything, since the bug is not reproducible at all on my machine. But judging from the many different reports of this issue and the fact that the same problem occurs in other apps that are embedding the script in different ways, I would assume that the bug is unrelated to this attribute.

But I think defer only moves the execution of the script to a later point, and I’ve been successfully using AP like this for a long time, so I cannot imagine that it would break anything.

4

Hi @candid,
Thanks for providing details on this issue. I have created a ticket for this in our backlog so that we can investigate and resolve it. You can find and track it at ACJS-1186 - AP.sizeToParent() doesn’t work consistently due to possible race condition.
Please let us know if you have any further updates.

Thanks,
Sampada