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

Tue Dec 21 08:21:01 PST 2021

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

            Bug ID: 234564
           Summary: Major bug on <img> height when children of flex
                    element
           Product: WebKit
           Version: Other
          Hardware: PC
                OS: Linux
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Images
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: pedropaulosuzuki1 at gmail.com
                CC: sabouhallawa at apple.com

Created attachment 447717

  --> https://bugs.webkit.org/attachment.cgi?id=447717&action=review

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

-- 
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/20211221/5da1923f/attachment.htm>