[Webkit-unassigned] [Bug 209983] New: WebKit doesn't preserve aspect ratio when computing cross size of flexed images in auto-height flex container

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Apr 3 13:40:34 PDT 2020


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

            Bug ID: 209983
           Summary: WebKit doesn't preserve aspect ratio when computing
                    cross size of flexed images in auto-height flex
                    container
           Product: WebKit
           Version: Safari 13
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: dholbert at mozilla.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

STR:
(1) Load https://bug1362789.bmoattachments.org/attachment.cgi?id=8866580

EXPECTED RESULT:
Image should be a large square. (700px wide and tall)

ACTUAL RESULT:
Image is stretched to be rectangular, destroying aspect ratio -- image is 700px wide but only 300px tall.


Chrome has the same problem, which is filed as https://bugs.chromium.org/p/chromium/issues/detail?id=721123 .

EdgeHTML and Firefox give EXPECTED RESULTS.

The flexbox spec section 9.4 "Cross Size Determination" says the following about how to determine cross sizes (the height in this testcase):
  # Determine the hypothetical cross size of each item
  # by performing layout with the used main size
  # and the available space
https://drafts.csswg.org/css-flexbox-1/#cross-sizing

Here, the "used main size" is the stretched size (700px), and "performing layout" (for an image with auto height) should involve stretching its height accordingly.

The resulting hypothetical main size is used to determine the size of the flex line, which in turn is used as the cross size for all of the line's cross-axis-stretched items (including the image). So, the image should end up 700px tall here.

Note: This is kinda similar to bug 199583 and bug 169974, but it's not a dupe of either one, I think, because:
- bug 199583 is about min-size resolution & images that are forced to shrink below their normal content size [and Chrome gets that one right whereas it gets this bug here wrong]
- bug 169974 is about the opposite sort of influence, where a specified cross size is intended to influence the resolved main size.

-- 
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/20200403/ee84c904/attachment.htm>


More information about the webkit-unassigned mailing list