Extra padding in Safari (macOS) 17.3

[barchard]

Describe the bug
I have tried several different resize methods but I am getting this large (extra) blank space at the bottom of my iFrame in Safari:

In Firefox, however, 122.0, everything looks great:

I've applied the CSS to the page per the docs,

    .iframe-container {
        position: relative;
        border: 0;
        width: 1px;
        min-width: 100%;
    }

iFrames are defined as:

<iframe srcdoc="..." allowfullscreen class="iframe-container"></iframe>

The CSS library I am using inside the child iFrame is TailwindCSS.

These iFrames are nested in <details> elements like such:

<details class="details">
        <summary>Info</summary>
        <div class="iframe-wrapper">
            <iframe srcdoc="..." allowfullscreen class="iframe-container"></iframe>
        </div>
</details>

The iFrame is asked to resize when the detail element is opened:

window.addEventListener('DOMContentLoaded', () => {
    // Add a toggle event listener
    const detailElements = document.getElementsByClassName('details');
    Array.from(detailElements)
        .forEach(function (detailElement) {
            detailElement.addEventListener('toggle', function(event) {
                let targetIFrame = this.querySelector('iframe');
                if (targetIFrame) {
                    if (detailElement.open) {
                        console.log('Detail element is now open');
                        if (targetIFrame.iFrameResizer !== undefined) {
                            targetIFrame.iFrameResizer.resize();
                        }
                    } else {
                        //console.log('Detail element is now closed');
                    }
                } else {
                    //console.log('No target iFrame found!');
                }
            });
        });
    iFrameResize({ log: true, checkOrigin: false, heightCalculationMethod: "max"}, '.iframe-container');
});

To Reproduce
Steps to reproduce the behavior:

1. Expand the detail element
2. Call resize() on open

Expected behavior
Match Firefox results

Screenshots
Screenshots above

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari, Firefox
• Version: 17.3, 122.0

[David J. Bradshaw]

This is going to be an issue with Safari rendering your CSS differently to FireFox and without seeing it, their is not much I can suggest.

I also don't understand why all the JS is needed in the code you give above. Are you using nested frames, as it has both code for the iframe and parent page mixed together in it.

[barchard]

The extra JavaScript is because, when the details element is closed, the height of the iFrame is set to 0 and no content is display. It seems iFrameResizer doesn't detect this change in visibility so it's not resizing the child iFrame. Therefore, I initialize iFrameResizer but manually call resize when the details element opens.

Do you need a sample of the child iFrame content? What would help you troubleshoot? I am using some content from tailwindui here so I'm not sure I can post the source publicly but I'm happy to send it privately.

Thanks

[David J. Bradshaw]

If you can put a minimal example online somewhere, I'll take a quick look.

[barchard]

@davidjbradshaw thanks, I've posted a stripped down sample here:

https://bit.ly/49f3Vk3

Please click the "Controls" details element. Thanks!

[David J. Bradshaw]

Wow there is a lot going on there. Here's a few things you might try.

1. Try setting the resizeFrom: 'child' option, As something is causing the parent page to constantly think it is resizing.
2. Your loading the iFrames via srcdoc rather than src. I guess this is a React app, as it does this when you inline iframe content. I have seen this cause issues before.
3. I'm currently working on version 5 of iframe-resizer, It should hopefully better cope with situations like this, as I have rewritten the event detection code. I'd be much obliged if you could give it a test and let me know if it helps.
   • #1205

[barchard]

Unfortunately, no change with resizeFrom: 'child'. Unfortunately, v5 had the same behavior (I kept all of the options the same). I'll try to refactor things to remove the use of srcdoc but why would that cause issues? Thanks

[barchard]

I was able to test but src vs. srcdoc did not change the behavior.

[David J. Bradshaw]

If you can put the updated version online, I'll take another look. The biggest problem with srcdoc is that it breaks the html inspector in Safari, so I can't look for other issues. Once the inspector is working, it's possible to see what element on the page is causing the issue.

[barchard]

Republished here, please expand the "Controls" detail element again. This one is using src instead of srcdoc. Thanks

[David J. Bradshaw]

In your iframe, you have the following class applied to the body tag. Once it is removed everything works.

.h-full {
  height: 100%;
}

The strange thing is that normally when this happens it doesn't just effect one browser.

[barchard]

Awesome, thanks!