1377234 - elements with display flex are not aligned correctly

Status: RESOLVED INVALID

(Core :: Layout, defect, P3)

Description

[moosa esfahanian]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.86 Safari/537.36

Steps to reproduce:

if you go here:
https://jsfiddle.net/bfhckv06/1/

 with FF 54 you will see that the radio buttion is not aligned with the label (Also tried with FF 55 problem is still there).

if you test the same page with FF 52 ESR or other versions before 54 they are aligned just fine. This page looks fine also on Chrome.


Actual results:

radio button is not aligned with the label.



Expected results:

radio button should have been aligned. Meaning it should have been higher the same level as the label.

Comment 1

[moosa esfahanian]

Attachment: FF54.png

Comment 2

[moosa esfahanian]

Attachment: FF-ESR52.png

Comment 3

[moosa esfahanian]

i have the screenshots attached, one is FF54 that has problem, and one is FF-ESR 52 that works fine.

Comment 4

[Daniel Holbert [:dholbert]]

We're actually doing the right thing here, according to the spec.

If you want baseline alignment among your flex items, you should use "align-items: baseline" on your flex container. Here's a jsfiddle with that change (which produces your expected results): https://jsfiddle.net/bfhckv06/3/

Without that, your flex items are subject to the default alignment, "align-items: stretch", which:
 (1) stretches the height of any auto-height elements to the height of the container (the height of the tallest item in this case)
 (2) If that's not possible for some reason, it falls back to start-aligning them.

In Chrome, they're failing to stretch for some reason, so they're just start-aligning the radio button (not baseline-aligning it), and that's incorrect.  In Firefox, the radio button is centered because Firefox is correctly giving it a tall height (stretching it to fill the flex container), and the widget centers its actual button part within that height.  Chrome does the same thing if you *explicitly* give the radio button a tall height here, too -- they're just failing to stretch its height for some reason.  I'll file a Chrome bug on that.

Comment 5

[Daniel Holbert [:dholbert]]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=768999 on Chrome and https://bugs.webkit.org/show_bug.cgi?id=177503 on WebKit.