Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

downsize seemingly not working on chromium? #1355

Open
jan-usc opened this issue Oct 29, 2024 · 13 comments
Open

downsize seemingly not working on chromium? #1355

jan-usc opened this issue Oct 29, 2024 · 13 comments

Comments

@jan-usc
Copy link

jan-usc commented Oct 29, 2024

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.
grafik
grafik

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
Copy link
Owner

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
Copy link
Author

jan-usc commented Oct 30, 2024

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)

grafik
grafik

@davidjbradshaw
Copy link
Owner

davidjbradshaw commented Oct 30, 2024

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
Copy link
Author

jan-usc commented Oct 30, 2024

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
Copy link

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
Copy link
Owner

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
Copy link
Author

jan-usc commented Nov 1, 2024

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
Copy link
Owner

davidjbradshaw commented Nov 1, 2024

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
Copy link
Owner

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

@davidjbradshaw
Copy link
Owner

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

Screenshot 2024-11-03 at 15 25 52

@jan-usc
Copy link
Author

jan-usc commented Nov 6, 2024

Hi, that's my plugins in chrome:
grafik

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?

grafik

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>

@davidjbradshaw
Copy link
Owner

Sorry for the slow reply, I've been unwell.

Do you still have the broken example online?

@jan-usc
Copy link
Author

jan-usc commented Dec 5, 2024

Hi Dave,

yes it's still online:

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

inside body (working as a charm):

https://www.dav-usc-muenchen.de/kurse-touren-veranstaltungen/kalender

without div (downsize not working):
https://www.dav-usc-muenchen.de/iframe

Thanks for your effort!
Jan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants