Bug 177503
| Summary: | WebKit fails to apply default "align-items:stretch" to radio, checkbox, and button input-types, as flex item | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Daniel Holbert <dholbert> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, emilio, simon.fraser, thorton, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, FromImplementor, InRadar |
| Version: | Safari 10 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: |
https://bugs.webkit.org/show_bug.cgi?id=210091 https://bugs.webkit.org/show_bug.cgi?id=210093 |
||
Daniel Holbert
STR:
1. Visit https://jsfiddle.net/671Lebj2/
EXPECTED RESULTS:
All the orange outline-boxes should be approximately the same height.
ACTUAL RESULTS:
The first three boxes are too short (shrinkwrapping their contents).
Firefox 55 and Edge 15 give EXPECTED RESULTS.
Safari 10.1 gives ACTUAL RESULTS.
Chrome 63 does something in between -- it's only got the first boxes being too short, but it correctly stretches the third box (the input type=button). I filed https://bugs.chromium.org/p/chromium/issues/detail?id=768999 on this issue in Chrome.
NOTES:
This is a flex container, which has "align-items:stretch" by default. This means its auto-height flex items should all stretch to the height of the container (as long as they don't have their own custom "align-self" value):
https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-stretch
But that's not happening for these widgets, in Safari/WebKit, for some reason.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/34666225>
Daniel Holbert
Here's an approximate reference case, where I've simply added "height:96px" to all of the flex items:
https://jsfiddle.net/671Lebj2/1/
(note the "/1" on the end -- that's the reference version)
Interestingly, Safari 10.1 still refuses to grow the <input type="button">, in this example, despite the explicit 'height'. That seems like another bug.
But in any case, for the radio button and checkbox, this reference case demonstrates that these widgets *will accept* a larger height, if it's explicitly specified. So, I don't see any reason why they shouldn't get their height stretched via align-items:stretch in the original testcase here.
Ahmad Saleem
I am able to reproduce this bug in WebKit ToT (263205@main) and we also has now same issue as in the past, Chrome had where radio and checkbox does not have outline-boxes stretched like other.
Chrome fixed it in following commit - https://chromium.googlesource.com/chromium/src/+/5e10fc62d211b94c40c15bff1bdd5c8914e68f87
Since, now only WebKit / Safari is odd one out, I am adding 'BrowserCompat' tag as well.