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
URL:
Keywords: FromImplementor, InRadar
Depends on:
Blocks:
 
Reported: 2017-09-26 13:57 PDT by Daniel Holbert
Modified: 2020-04-07 05:03 PDT (History)
6 users (show)

See Also:


Attachments

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
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.
Comment 1 Radar WebKit Bug Importer 2017-09-26 14:00:58 PDT
<rdar://problem/34666225>
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:
  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.