downsize seemingly not working on chromium?

[jan-usc]

Describe the bug
resizing iframe (up- and downsizing) works perfectly on firefox, but seemingly not in chromium browsers

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.dav-usc-muenchen.de/iframe
2. select "Alle Touren/Kurse nach Datum'' in the select box "Bitte wählen"
3. the iframe is nicely upsized
4. select "Kanu' in the select box "Bitte wählen"
5. iframe not downsized (if using chromium browser, eg Chrome, edge, see first screenshot)
   5.b iframe downsized accordingly (if using firefox, see scons screenshot)

Expected behavior
iframe downsized also when using chromium browser.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: windows11
• Browser firefox 131.0.3/Chrome 130.0.6723.92
• Version see above

Smartphone (please complete the following information):
n/a

Additional context
Add any other context about the problem here.

Any help greatly appreciated!

[davidjbradshaw]

Hi,

This will turn out to be a CSS issue. iframe-resizer manages to work around most of these, but have a look at this page that details a few ways CSS can trip things up and how to work around them.

https://iframe-resizer.com/content_guidelines/

I’m interested to know how this only affects Chrome, so will take a more detailed look later in the week. It would be very helpful if you could install the latest beta version and turn logging on to enable me to see what is happening.

npm i @iframe-resizer/child@beta

[jan-usc]

Hi,

thx for your quick reply!

I referenced the beta on the child page and activated logging

seems that under Chrome the calculated size doesnt change when the content of the iframe is shrinked (screenshot1), whereas the size changes if FF (screenshot2)

[davidjbradshaw]

Looking at those logs, it appears that you’re loading a new page into the iframe. As part of the page setup iframe-resizer sets the height of both the body and html elements to auto. It appears that something on your page is overriding this value in Chrome or not allowing another element inside it to shrink.

The interesting bit, is that after the initial size calculation is done, it appears not to be happy with this and checks it another two times, but your page CSS is still reporting that the body hasn’t downsized.

So my question is how is that height value on body being set in Chrome?

[jan-usc]

Yes, I do load a new page into the iframe whenever the selection in the select changes. Unfortunately, the webapp within the iframe is based on a rather old framework, the pages are server-side generated whenever an action occurs in the browser. Not a modern single-page client side js app.

Regarding your question, I'll try to find out, but I need the help of a colleague.

[yevgeniy2000]

Hi David,
I'm a colleague of Jan. We found out, that Chrome does not update the size of a div if the content shrinks. It can only increase the height. Apperantly it is not possible to change that behaviour using min-height or fit-content.

Instead of using the height of the body-element, we saw that the script adds a empty div (height=0) in the end of the iframe.

We found this solution:
To get the correct height, you could use iframeBodyElement.lastChild.offsetTop.

[davidjbradshaw]

That behaviour is going to be caused by something in your CSS, the solution will be to remove the CSS that causes the issue, rather than adding more CSS to try to overpower the root cause.

If you want to use a a particular element on the page for sizing the iframe, you can add a data-iframe-size attribute to that element.

https://iframe-resizer.com/setup/advanced

[jan-usc]

I fully agree that we should find the root cause. We tried on a test page w/out any css or js (apart from iframe-resizer), but still doesnt downsize in chrome.

https://tp.dav-usc-muenchen.de/iframe.html

Could you maybe point us to an example page where downsizing works? That could be helpful in finding our root cause...

thx!

[davidjbradshaw]

That’s very strange, have you tried the /example/html folder in this git project? The different examples are all separate html pages that you can navigate between in Chrome and each one will cause the iframe to change size, as it loads.

[davidjbradshaw]

Have you tried another copy/version of Chrome? Just wondering if the issue is a browser plugin?

[davidjbradshaw]

I just tried it in Chrome, and don't have the issue. What plugins are you using?

[jan-usc]

Hi, that's my plugins in chrome:

I also tries with a new clean profile in chrome, also no downsizing. Also in edge without plugins.

in the log you've posted above I can see an upsize from 7834 to 54377, correct?

Do you also see a downsize in the logs when accessing our page? Could you pls select "Kanu" in the select?

I now have a working solution, adding the following div surrounding the whole body content, but still would be nice to find the reason why it doesn't work out of the box.

<div class="data-iframe-size" data-iframe-size>