1582545 - CSS setting -moz-padding-start adds too much padding for select elements

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[voltron]

Attachment: selectbug.html

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

Steps to reproduce:

1. Open the attachment "selectbug.html" in Firefox
2. Look at the left side padding of the select element

Actual results:

Left-side padding is about 5 pixels (too much).

Note that using padding-inline-start causes the same incorrect result.

Expected results:

Left-side padding should be 2 pixels (as set by CSS). This works correctly in Chrome.

Comment 1

[Florencia Di Ciocco, NI to vbalducci]

Hi Voltron,

Thanks for the details. I was able to reproduce the bug on Windows 10 on the following versions:

Release 69.0 (64-bit), Nightly 71.0a1 (2019-09-23) (64-bit) and Beta 70.0b3 (64-bit).

I've chosen a component. If you consider that there's another component that's more proper for this case you may change it.

Best regards, Flor.

Comment 2

[Florens Verschelde :fvsch]

Pretty sure this bug is not for DevTools, but about how Gecko styles the HTML <select> element's button.
Firefox gives some extra horizontal padding to <select>s that can't be removed, probably somewhere in its shadow DOM. It's an old issue as far as I know (I remember battling it years ago).

Taking the liberty to move to Core > Layout: Forms Controls.
I haven't looked for duplicates, but since Firefox has had this issue for years it's likely we have a similar bug on file.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

It is platform specific? The padding value on my Linux box is 2px.

Comment 4

[Florens Verschelde :fvsch]

The computed value is 2px, but there is more space coming from "somewhere".

See for instance: https://codepen.io/fvsch/pen/LYPqQbm
Expected result: text touches the left border.
Actual result on macOS: text looks like it's roughly 4px away from the left border.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

I bet that somewhere is here: https://searchfox.org/mozilla-central/rev/153feabebc2d13bb4c29ef8adf104ec1ebd246ae/layout/style/res/forms.css#333

See bug 1560824, this is the same but in the inline direction.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Gosh! I did put the bug in the URL field. :/

Comment 7

[C. Martin]

Will this ever get fixed? I'm all in favor of using native form elements, but this select padding is really annoying. (It's just as annoying, that you cannot add independent option padding in Blink/Webkit).

Comment 8

[Emilio Cobos Álvarez (:emilio)]

This was added in bug 1499184. We rewrote combobox select rendering so now it shouldn't be affected by display: none options. Let me look into that.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1582545 - Allow padding-inline of select to be overridden by authors. r=TYLin,#layout

We added this in bug 1499184. However since then we've reworked how
combobox sizing works (bug 1744009) so the original issue shouldn't
happen.

That way selects are sized just like buttons.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1499184

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/79c24b3fc675
Allow padding-inline of select to be overridden by authors. r=TYLin

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/58853f2ef552
Fix a test I missed now that we have a little more space in the inline axis.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bcc65667dfb5
More reliable fix for combobox-zoom.html on OSX.

Comment 14

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/79c24b3fc675
https://hg.mozilla.org/mozilla-central/rev/58853f2ef552
https://hg.mozilla.org/mozilla-central/rev/bcc65667dfb5

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox106 to wontfix.

For more information, please visit auto_nag documentation.

Comment 16

[Emilio Cobos Álvarez (:emilio)]

Probably deserves some bake time.