Streaming live at 10am (PST)

Proportional images not working in Firefox


#1

Hey all,

Hoping someone knows what’s happening here. I’m using the nice trick for proportional images (a div with 0 height and top padding percentage) which works perfectly everywhere - except Firefox. Mac and pc, multiple FF versions. The source code shows it reads the height of the div as 0, but ignores the padding.

Any ideas as to why this might happen?

Thank you in advance,

Steve


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @energidesign

Thanks for posting this, this definitely sounds like weird behavior.

What sites are you seeing this issue occur in? Can you send me the site Read-Only links please?

Can you also please share some screenshots of the behavior you’re describing?

Thanks in advance!


#3

Hey Brandon,

Thanks for the fast response. I had just updated the site to use regular elements as they easily work as expected, but I always prefer to use

elements with background images for that tiny bit of extra security with images not being draggable.

Anyway, I went back in and added one image div in the same style as I had originally. If you go to the link here:

https://preview.webflow.com/preview/hawaii-video-memories?preview=cdc9175944a09d19202ade4b4a7301c5

and go to the ABOUT page, scroll down to the bottom and there’s a div in there with your name on it :slight_smile:

If you view that page in Safari and Chrome, the div shows. If you view in Firefox, it doesn’t. I attach screen shots below for you.

Thanks so much!

If you also have a second to assist, I did post another topic a little while back about the embed code (HTML) I have on the home page, even though it’s set to not be visible on tablet and mobile, not only does it still load the code (as I know it should, as it’s only invisible) but on mobile the load time blows out to 15-20 seconds because it’s actually downloading the video to phone memory. Is there any way to prevent this, or a script option to prevent the video/html code appearing in the DOM based on the media query of less than 1024px?

Sorry to tag another item on here, just very frustrating as the mobile version is super light, fluid and beautiful, but the home page load time is killing it.

Thank you sir! Hear from you shortly,

Steve


#4

Hi @energidesign

Thanks for sharing all those details – definitely helpful.

I opened your site and definitely was able to see the issue. Did a bit of research and it looks like this is a known bug (reference). Super specific FF bug that only affects % based margin / padding of child elements in a flex container.

As a quick workaround you can use vh instead of % though (GIF)

Hope that workaround helps. I’ll also check out that other forum post of yours — can you share a link? :slight_smile:


Error/bug on Firefox
#5

Hi Brandon,

Thanks so much for checking that out, and I guess I’m “glad” it’s a bug and not me :wink: The VH workaround is OK, but is of course based on the window height currently, which means the image proportions will change on devices and window resizing, etc. I’ll stick with simple for now, at least I know that works :wink:

The video issue, however, is the big one. Please let me know if you can assist on this at all… I know it’s not necessarily a Webflow issue because (1) the code is an embed, and (2) you shouldn’t have to help with scripting and media queries… but I am hugely, hugely grateful to you for offering to help.

I’m in Munich, will be online another 2-3 hours so hopefully you might come up with something. Anything at all is appreciated…

Thank you,

Steve


#6

No worries at all :slight_smile: — can you share a link to that other post?


#7

You’re a true gent, thank you! This is the link, I added it at the bottom of a previous post someone had created, as it was a similar issue, but perhaps too old to be noticeable:

https://forum.webflow.com/t/background-video-causes-page-load-delay-on-mobile/50639/5

Steve


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.