[Webkit-unassigned] [Bug 205431] New: <img> with large intrinsic height where height attribute is omitted, inside flex/inline-flex container, is not scaled vertically

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Dec 18 20:40:35 PST 2019


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

            Bug ID: 205431
           Summary: <img> with large intrinsic height where height
                    attribute is omitted, inside flex/inline-flex
                    container, is not scaled vertically
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Macintosh
                OS: macOS 10.15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: hugh.guiney at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Reproduction:
- Create a series of images.
- All image resources have larger intrinsic dimensions than their display dimensions.
- All images have an explicit width set, but no explicit height.
- All images are the immediate children of flex containers.

https://codepen.io/hguiney/pen/QWwdYMZ?editors=1100

Expected result:
All images should display at [display width]x[display height derived from proportional scaling].

Actual result:
All images display at [display width]x[intrinsic height], creating tall negative space above and below the image in the SVG case (probably due to viewBox) and a vertically stretched image in the bitmap case.

Result in Chrome and Firefox is as expected.

Notes:
- If <img>s have neither width nor height attributes set, each image displays at its resource’s intrinsic dimensions.
- If explicit height is added to images (either <img width="25" height="25" /> or <img height="25" />), problem resolves.
- If <picture> (display: flex or inline-flex) has align-items: center, problem resolves.
- If <picture> is set to display: inline-block, problem resolves.

-- 
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/20191219/d2e6256a/attachment.htm>


More information about the webkit-unassigned mailing list