glassen.ro - Incorrect render of the images in the demo gallery

[bejenaru-victor]

URL: https://glassen.ro/usi

Browser / Version: Firefox 94.0
Operating System: Windows 10
Tested Another Browser: Yes Opera

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
I've encountered a problem at an element rendering. Under the image thumbnails from the link I provided is placed an image swiper. It seems like Mozilla Firefox browser is miscalculating the width of the 'anchor' tag where the image is placed. It makes it wider than it should be. I've tested the look of that element on multiple browsers (Opera, Brave, Edge and Chrome aka 'Arch Nem') and this browsers seem to calculate the width of that element in a proper way. If that's a development error, please let me know. Thank you

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Note: The issue is not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 96.0a1 (2021-11-07)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[ksy36]

I've created a reduced test case https://codepen.io/ksy36/pen/porKVoV. Looks like .swiper-slide element that wraps the images is too wide in Firefox, while in Chrome its width is equal to the image width.

hi @dholbert, wonder if you know whether Firefox behaviour is correct here?

[dholbert]

More-reduced testcase: https://jsfiddle.net/dholbert/6e2sg9tr/

I think Chrome is probably-correct here; .swiper-slide ultimately has a definite height, since it is (by default) a stretched flex item in a flex container whose cross-size is definite (its parent has height:50px). So the final layout should be the same as if .swiper-slide had height: 50px up-front, essentially. And that doesn't match our behavior; if I give .swiper-slide an explicit height: 50px, then we change to match Chrome.

CC @aethanyc who has been poking around at related issues (around flex item sizing with aspect-ratios being involved), who might be interested.

I'll file a bug on this when I get a chance tomorrow.

[aethanyc]

This bug looks similar to https://bugzilla.mozilla.org/show_bug.cgi?id=1711823, but I haven't debug to be sure.

[dholbert]

Thanks! I tried applying the current patch for that bug and it doesn't help at this point, so I went ahead and filed a new bug for this. We can dupe later if appropriate.

Filed: https://bugzilla.mozilla.org/show_bug.cgi?id=1740658

[ksy36]

Thanks @dholbert and @aethanyc. Will close this as a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1740658