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
              
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!
// Fix for incorrect iframe sizing
export const resizeFix = async (): Promise<void> => {
  const AP = await waitForAP();
  const refElement = document.querySelector('.ac-content') || document.body;
  if (AP && AP.resize) {
    new ResizeObserver(function() {
      if (scrollHeight !== refElement.scrollHeight) {
          scrollHeight = refElement.scrollHeight;
          AP.resize('100%', scrollHeight.toString() + 'px');
    }).observe(refElement, {
        box: 'border-box'