Height issue with Safari and Atlassian-connect script

When loading the following script:

<script src="https://bitbucket.org/atlassian-connect/all.js" data-options="sizeToParent:true;"></script>

With Google Chrome it all renders at the parent’s size
But with Safari (14.0.3) it looks like this:

Can anyone help with this issue? Thanks!

To be honest, I gave up on Connect sizing the iframe correctly, so we have this snippet to fix it:

  // Fix for incorrect iframe sizing
export const resizeFix = (): void => {
  let scrollHeight = document.body.scrollHeight;
  const observer = new MutationObserver(() => {
    if (scrollHeight !== document.body.scrollHeight) {
      scrollHeight = document.body.scrollHeight;
      if (AP && AP.resize) {
        AP.resize('100%', `${scrollHeight.toString()}px`);
        AP.sizeToParent();
      }
    }
  });

  observer.observe(document.body, {
    attributes: true,
    childList: true,
    subtree: true
  });
};
2 Likes

Hi there, thanks for this! (and for your honest answer haha)
Works very well! Much appreciated!

Worth noting also I had to remove data-options="sizeToParent:true;" from the script tag for this to work fully.

Thanks again!