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 RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, emilio, simon.fraser, thorton, webkit-bug-importer, zalan
Priority: P2 Keywords: FromImplementor, InRadar
Version: Safari 10   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=210091

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.