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.

Sign up for GitHub

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

Jump to bottom

The size of an iframe keeps increasing when using vh units for elements inside the iframe #1062

Closed
lelekaspb opened this issue May 15, 2022 · 12 comments
Closed

The size of an iframe keeps increasing when using vh units for elements inside the iframe #1062

lelekaspb opened this issue May 15, 2022 · 12 comments
Labels
Browser Limitation Not supported by current browsers

Comments

@lelekaspb
Copy link

Describe the bug
I have a page I need to embed with iframe. This page has a hero picture that takes up entire viewport (100vw and 100vh) plus the rest of the content that is dynamic and therefore changes it's height. The 100vw value behaves fine, however, 100vh break the page with embedded iframe. Namely, the height of the page endlessly while zooming in the picture. I saw that previous issues recommended removing unnecessary vh and % units, but in my case they are necessary.

To Reproduce
Set height of a section on the child page to 100vh

Expected behavior
I would expect vh units work inside the iframe since this is now so popular and widely used.

Desktop (please complete the following information):
I have seen the same behavior in Chrome and Firefox
@davidjbradshaw
Copy link
Owner

If you find a fix for this, I would welcome a PR

@10Derozan 10Derozan mentioned this issue Apr 21, 2023
Merged
3 tasks
@Paulsky
Copy link

Paulsky commented Apr 8, 2024

@davidjbradshaw I'm thinking about making a PR, but I'm not sure if you like this approach:

  • Get browser window height in pixels
  • Foreach element check if it has a style with 'vh' (could be elements with some kind of class?).
  • If so, calculate the number of pixels by vh (windowsHeight * (vhValue/100)) and replace it
    (example, the window has a height of 1080px, my element has a 'min-height: 50vh', the property gets replaced by 'min-height: 540px'.

@davidjbradshaw davidjbradshaw reopened this Apr 8, 2024
@davidjbradshaw
Copy link
Owner

davidjbradshaw commented Apr 8, 2024 •
edited
Loading

What would happen if the user resizes the browser window?

@Paulsky
Copy link

Paulsky commented Apr 8, 2024

Not sure if it's possible but ideally it would recalculate on resize. Maybe it should add every element that is 'fixed' to an array with it's original vh. On resize loop over the elements and recalculate?

@FranCarstens
Copy link

FranCarstens commented Apr 11, 2024 •
edited
Loading

I like @Paulsky's idea. Would love to see what that may look like, and here for the discussion.

I've been struggling with the same issue on a similar implementation (my own code, not this repo). I'm loading in 3rd party code with vh and svh units in the CSS. Finding and replacing them feels like a heavy lift, with some serious performance implications, especially if you want to update on window resize. Consider CSS like calc(100svh - 80px);.

If OP (probably long gone) has control over the src doc I would update the CSS to somewhat match their goal (tricky), or use JS to access window.parent and set the size inline to window.parent.innerHeight. Otherwise you'd somehow have to change the viewport context of the iframe - I don't believe that's possible.

@davidjbradshaw
Copy link
Owner

I'm happy to look at a PR, but I fear it will be tricky to make it work reliably. I'm also concerned about the performance impact. Currently I have a performance target of under 1ms to make all the size calculations.

@davidjbradshaw
Copy link
Owner

btw the upcoming V5 #1212 release will automatically remove vh units from the <html> and <body> tags. which will catch the main place where people use them. It's the most popular way to break things.

@davidjbradshaw
Copy link
Owner

Thinking a bit more the easiest solution might be to create an array of vh elements, set them all to display: none each time the page is resizing and then display them again once we're at the new page size.

I might add beforeResize and afterResize hooks if someone comes up with a good use for them.

@EvanBoyle
Copy link

I'm seeing issues with resizing when the user changes the zoom level on the browser. Could this be related?

@davidjbradshaw
Copy link
Owner

@EvanBoyle maybe, it really depends on the CSS in your iframe. Do you have issues with an unstyled page in the iframe? If so I think that is a new ticket.

@Paulsky
Copy link

Paulsky commented Apr 17, 2024

Unfortunately, I currently don't have the time to create a PR. Maybe I'll be able to contribute in the near future.

@davidjbradshaw davidjbradshaw added the Browser Issue This issue is due to limitations in current browsers and has no simple work around label May 17, 2024
@davidjbradshaw davidjbradshaw added Browser Limitation Not supported by current browsers and removed Browser Issue This issue is due to limitations in current browsers and has no simple work around labels Aug 30, 2024
@davidjbradshaw
Copy link
Owner

Having looked into this, any possible fix would require inspecting the computed CSS for every element on the page and my test show that running that on this page would take around 20 seconds to process. So is just not practical to implement.

Instead I will add a page the website on iframe content guidelines that explains why you don’t actually need vh units, as when the page resizes to meet your content, the content does not need to scale to meet the page size.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Browser Limitation Not supported by current browsers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@davidjbradshaw @EvanBoyle @Paulsky @FranCarstens @lelekaspb