Bug 177503 - WebKit fails to apply default "align-items:stretch" to radio, checkbox, and button input-types, as flex item
Summary: WebKit fails to apply default "align-items:stretch" to radio, checkbox, and b...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, FromImplementor, InRadar
Depends on:
Reported: 2017-09-26 13:57 PDT by Daniel Holbert
Modified: 2023-04-20 20:51 PDT (History)
7 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Holbert 2017-09-26 13:57:09 PDT
 1. Visit https://jsfiddle.net/671Lebj2/

 All the orange outline-boxes should be approximately the same height.

 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.

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):
But that's not happening for these widgets, in Safari/WebKit, for some reason.
Comment 1 Radar WebKit Bug Importer 2017-09-26 14:00:58 PDT
Comment 2 Daniel Holbert 2017-09-26 14:06:20 PDT
Here's an approximate reference case, where I've simply added "height:96px" to all of the flex items:
  (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.
Comment 3 Ahmad Saleem 2023-04-20 20:51:58 PDT
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.