[Webkit-unassigned] [Bug 234564] Major bug on <img> height when children of flex element

Wed Dec 22 17:35:55 PST 2021

https://bugs.webkit.org/show_bug.cgi?id=234564

--- Comment #2 from Pedro Paulo <pedropaulosuzuki1 at gmail.com> ---
(In reply to Sergio Villar Senin from comment #1)
> (In reply to Pedro Paulo from comment #0)
> > Created attachment 447717 [details]
> > Minimal HTML file which reproduces the bug
> > 
> > Hey! Hello everyone!
> > 
> > I was testing one of my websites on GNOME Web and found out that there was a
> > major bug on the <img> tag when it is a child of a column-flexed flex
> > element. The image gets the correct width, but the height does not follow
> > the aspect ratio as it should, pushing the original image height instead,
> > which generates problems for alignment. It can be fixed by putting the
> > actual height you want, but that doesn't work on some cases (like on my
> > website) where the width of the parent is dynamic, and it is non-trivial to
> > calculate the correct height there without cluttering the website with
> > Javascript resizes, which is also not recommended. It works fine on both
> > Firefox and Chromium-based browsers, so it seems to be a Webkit glitch. I
> > later tested the issue on a friend's iPhone on Safari and the glitch
> > happened there too.
> > 
> > ## Minimal example:
> > ```html
> > <html>
> > 	<body>
> > 		<div style="display: flex;flex-direction: column;">
> > 			<img
> > src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Artix_Linux_Logo.
> > svg">
> > 		</div>
> > 	</body>
> > </html>
> > ```
> > 
> > Tested on Epiphany (GNOME Web) 41.0 Flatpak (latest on Flathub) and on a
> > friend's iPhone (don't know which version, but probably up to date).
> 
> Thanks for the report.
> 
> Please, avoid things like "major bug" or the like in the bug title because
> it does not help triagging. It'd be much useful to try to describe the bug,
> like "aspect ratio of SVG not working on column flexboxes" or whatever you
> like.
> 
> The question I have is, did it used to work at some point? I just basically
> want to know whether it's a recent regression (there were recent changes) or
> something that has been around for a while.

Oh! Sorry about that. My mistake.

I encountered it while I was testing my website recently, but I found someone relating a similar issue back in 2019 or something, but I cannot find it here. Oh, and it seems to also happen with regular rasterized (non-SVG, such as jpeg and png files) too, but they get stretched instead.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211223/2354fef9/attachment-0001.htm>