Bug 251290
| Summary: | Flex item containing an image in column layout is sized to intrinsic image width instead of computed image width | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Cole <cole> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, cole, karlcow, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 15 | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | https://jsfiddle.net/6b0gdvLs/ | ||
Cole
Live reproduction can be viewed here: https://codesandbox.io/s/lucid-margulis-3c7v8e?file=/index.html
Note that the `div` elements (visualized with a blue border) take on the intrinsic widths of their image children, rather than the computed image width (as expected). This currently also fails on Firefox (see https://bugzilla.mozilla.org/show_bug.cgi?id=1344525), but performs correctly on Chrome, where the divs are sized according to their image child's computed width.
Setting `display: contents` on the `div`s does resolve this layout issue, but prevents any styles from being applied to the `div`s themselves, and also breaks scroll snapping behaviour if the flex container is set to allow its contents to overflow with scrolling.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Karl Dubost
This affects the layout too.
section div {
height: 100%
}
There's another bug on Mozilla bug for this. I can't find it right now.
Radar WebKit Bug Importer
<rdar://problem/105019330>