Closed Bug 1431541 Opened 4 years ago Closed 4 years ago

Flex behavior different for input checkbox

Categories

(Core :: Layout, defect, P3)

54 Branch
defect

Tracking

()

RESOLVED INVALID
Tracking Status
firefox-esr52 --- unaffected
firefox57 --- wontfix
firefox58 --- wontfix
firefox59 --- wontfix
firefox60 --- fix-optional
firefox61 --- affected

People

(Reporter: andrewsmith, Unassigned)

References

Details

(Keywords: regression)

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.
Component: Untriaged → Layout
Product: Firefox → Core
Keywords: regression
Version: 57 Branch → 54 Branch
[ Triage 2017/02/20: P3 ]
Priority: -- → P3
Mats, any chance you could take a look at this?
Flags: needinfo?(mats)
Flags: in-testsuite?
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
Flags: needinfo?(dholbert)
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
(I filed bug 1450117 for the issue identified at end of comment 7.)
(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.