1766205 - Dropdown list is not aligned with dropdown menu

Status: NEW

(Firefox :: Settings UI, defect, P3)

Description

[exploratory666]

Attachment: Dropdown list is not aligned with dropdown menu.mov

Affected versions

• 99.0.1 (64-bit)
• 101.0a1 (2022-04-23) (64-bit)

Affected platforms

• macOS 10.13.6
• macOS 10.15.7

Steps to reproduce

1. Launch Firefox, access "about:preferences"
2. Scroll down to "Zoom";
3. Click on the "Default zoom" dropdown menu;

Expected result
The dropdown list is aligned with the dropdown menu

Actual result
The dropdown list is not aligned with the dropdown menu

Note

• This is only on macOS.
• Many dropdown menus on this page have this issue.
• I'm not sure if it's a design or not. I'm sorry for bothering you if it is a design.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Thanks for reporting. We shouldn't have the offset that you have shown in your video. Can you please test with mozregression to see when this started happening? https://mozilla.github.io/mozregression/

Comment 2

[Negritas Sergiu, Desktop QA]

Hello I have managed to reproduce the issue with firefox 101.0a1(2022-04-29) 100.0 and 99.0.1 on macOS 10.13.6 and on Ubuntu 20.04 but the issue is more pronounced on macOS.
I will mark this issue as NEW in order for our developers to look more into it.

Thank you!

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Hi Negritas, can you test with mozregression to see when this started occuring? Since it is more noticeable on macOS, then you can just test with macOS.

Comment 4

[Negritas Sergiu, Desktop QA]

Hello Jared! Sorry for the long reply time I have tried to find a regression for this issue using the mozgression tool and MacOS 10.13.6 and all the drop-downs are a bit misplaced including firefox 66.0a1(2019-01-01).
Please tell me if I should go and look on older firefox versions.

Thank you!

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

Thanks Negritas. There's no need to test older versions. I expect that this issue is happening due to margins/padding on the <select>/<menulist> and that's getting applied to the popup. Since we know it's not a recent regression we can adjust the tracking flags as such.

I expect the best fix here will be moving to a shared component library where we don't have one-off styles for <select>/<menulist> elements.