Height issue with Safari and Atlassian-connect script

Bitbucket Development Bitbucket Cloud
,
1

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:

Screenshot 2021-03-19 at 18.23.45
Screenshot 2021-03-19 at 18.23.451664×1352 96.7 KB

Can anyone help with this issue? Thanks!

2

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
  });
};
3 Likes
3

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!

4

Hi @remie, thank you for this snippet! What is the license of this code? Are we free to reuse it in our products?

5

Oh sure, go for it. It is unlicensed right now, but if you really care for that I would say Apache 2.0

6

Thank you for the reply. Highly appreciated!

Cheers,
Mateusz

7

@MateuszZielinski, the code is now officially made available as open source:

1 Like