Closed Bug 1431541 Opened 4 years ago Closed 4 years ago
Flex behavior different for input checkbox
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0 Build ID: 20180103231032 Steps to reproduce: Compare the two: 1. A flexed parent containing an input checkbox 1. A flexed parent containing a div that has an input checkbox Comparison: https://jsbin.com/jazelekuhu/edit?html,css,output Actual results: For #1: vertically centers the checkbox For #2: stays at the top Expected results: Both are expected to stay at the top. This behavior is observed in Chrome and Safari.
regression window: https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=a7000da4b6e2a79c5750dad71095865bdf75be04&tochange=db62e3ac853f7c4d8f045629358264ebf822398c regressed by: Bug 605985
Status: UNCONFIRMED → NEW
Ever confirmed: true
[ Triage 2017/02/20: P3 ]
Priority: -- → P3
Mats, any chance you could take a look at this?
I tend to think our layout for this example is correct. The checkbox is stretched and then renders centered in that size as large as possible while keeping its aspect ratio. It behaves the same as type="button" or type="text" for example. I don't know why Chrome ignores stretching type="checkbox" specifically. I don't see any support for that in any specs. (If you manually set the height, e.g.: <input type="checkbox" style="height:40px"> then you'll see that Chrome renders that the same as we do.) dholbert knows Flexbox layout better than me though...
Flags: needinfo?(mats) → needinfo?(dholbert)
So the question here is really whether the implied/default "align-self:stretch" styling has any effect on the checkbox's height. Here's a reduced testcase, comparing (implied) align-self:stretch to height:100%: https://jsfiddle.net/r60cpynb/ Chrome doesn't stretch the first checkbox. We do (making it look vertically centered). (The centering isn't quite the same between the left & right examples, because of box-sizing stuff & height:100%, but don't pay too much attention to that.) Edge agrees with us, for what it's worth. I'm guessing that something in Bug 605985 made us change our opinion internally about whether the checkbox (as a flex item) is considered to have a computed height of 'auto', which in turn impacts whether or not align-self:stretch gets applied or not, per https://drafts.csswg.org/css-align/#valdef-justify-self-stretch
Right, note that bug 605985 moves the "block/inline-size: 13px" under the "%if defined(MOZ_WIDGET_ANDROID)..." conditional. https://bugzilla.mozilla.org/attachment.cgi?id=8834700&action=diff#a/layout/style/res/forms.css_sec2 (and I think we've entirely removed it since then) This is intentional since it's bogus to have styles like this in the UA sheet, precisely because it inhibits stretching and other CSS stuff that only applies when sizing is 'auto'. I'd recommend closing this bug as invalid and filing a bug on Chrome.
Chrome & WebKit bugs already filed, actually: https://bugs.webkit.org/show_bug.cgi?id=177503 https://bugs.chromium.org/p/chromium/issues/detail?id=768999 Also: I tested other input types and found that we do have this same issue (not stretching presumably due to non-'auto' height in UA stylesheet). In Nightly on my system, input type="color" and "range" are not stretched in this example: https://jsfiddle.net/zjaox2hu/ I'll file a separate Firefox bug for that.
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID
(And it looks like this was basically a duplicate of bug 1377234, which had a slightly different testcase but the same expectations & underlying explanation)
You need to log in before you can comment on or make changes to this bug.