1602359 - Wrong display behaviour of custom checkboxes/radio buttons in an unordered list in multiple columns

Status: NEW

(Core :: Layout: Flexbox, defect, P3)

Description

[Thanh Phan]

Attachment: custom-checkbox-display.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

Minimal reproduction example: https://stackblitz.com/edit/typescript-6lmabr

1. Create an unordered list and use CSS columns property to display the list on multiple columns
2. In each list item, create a checkbox/radio button item with custom display behavior (basically a visually hidden input inside a flex style label, styling by CSS)

Actual results:

• The custom checkbox for the first item of every column other than the first column has abnormal height.

Notes:

• This behavior only applied for Firefox 72 (both Official & Developer Edition edition), while my Firefox 71, Chrome 78, MS Edge 44 displayed the custom boxes normally
• If I switch the display property of labels to block rather than flex, then the boxes can display normally

Expected results:

• The custom checkboxes should have the same height uniformly

Comment 1

[Seba S.]

Hi, thanhpd.mac!

Thanks for your contribution!

sadly, I don't have deep knowledge in CSS to get into this, I've assumed using block instead of flex should do that but it could be a specific version issue.

I'll add product and component on this one so we can research a little bit more. If you have some more information you can add it here.

Regards,

Comment 2

[Hiroyuki Ikezoe (:hiro)]

The range I got is; https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=30ea2905130e85f9e1d8d56fa3097901eec6514b&tochange=67cd1ee26f2661fa5efe3d952485ab3c89af4271

Thanh, thanks for reporting this issue, but I am bit confused. On my linux box, the issues still happens on Firefox 71. It's possible that the issue has been being regressed by several bugs. Can you please double check that the issue doesn't happen on Firefox 71?

Thanks!

Comment 3

[Emilio Cobos Álvarez (:emilio)]

It smell like the kind of thing that would be regressed by bug 1308876, and maybe fixed by column-span stuff? But yeah, I can still see it in nightly.

Comment 4

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=e6e712904806da25a9c8f48ea4533abe7c6ea8f4&tochange=d6bf703c5deaf1e328babd03d5e68ff2a4ffe10e

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Thanks! Setting P3 since it's not a recent regression.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's testcase

Having to extract testcases from sites like stackblitz.com (which I'd never seen before) is a huge pain. I spent 10 minutes poking at the source, giving up, and finally realizing that it had a tabbed UI that let me get to the original HTML and CSS, which worked when pasted together.

So here's the testcase.

If it had been attached in the first place, I might have otherwise spent that 10 minutes debugging it.