Closed barchard closed 5 months ago
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.
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
If you can put a minimal example online somewhere, I'll take a quick look.
@davidjbradshaw thanks, I've posted a stripped down sample here:
Please click the "Controls" details
element. Thanks!
Wow there is a lot going on there. Here's a few things you might try.
resizeFrom: 'child'
option, As something is causing the parent page to constantly think it is resizing.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.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
I was able to test but src
vs. srcdoc
did not change the behavior.
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.
Republished here, please expand the "Controls" detail
element again. This one is using src
instead of srcdoc
. Thanks
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.
Awesome, thanks!
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,
iFrames are defined as:
The CSS library I am using inside the child iFrame is TailwindCSS.
These iFrames are nested in
<details>
elements like such:The iFrame is asked to resize when the detail element is opened:
To Reproduce Steps to reproduce the behavior:
resize()
on openExpected behavior Match Firefox results
Screenshots Screenshots above
Desktop (please complete the following information):