Bug 149871 – <select>'s native dropdown menu is horizontally misaligned

• Status: NEW
• Component: Forms

[Chris Rebert]

Created attachment 262585 [details]
Screenshot. The red and green lines ought to completely overlap

Applying fairly simple styling to a <select> causes the left edge of the
native dropdown menu for the <select> (i.e. the red line in the screenshot)
to not align with the left edge of the <select> element itself
(i.e. the green line in the screenshot).
The screenshot is of https://bootstrapdocs.com/v3.3.5/docs/css/#selects

Downstream issue: https://github.com/twbs/bootstrap/issues/17801

[Chris Rebert]

Correction: No special styling is required to observe this. It also happens with a completely vanilla <select>.

[Radar WebKit Bug Importer]

<rdar://problem/23023931>

[Simon Fraser (smfr)]

Created attachment 262669 [details]
Testcase

Reduction attached.

What we're trying to do here, on the unstyled control at least is to position the drop-down so that the text of the items matches the position of the text in the non-interactive state. In other words, we're trying to avoid a "jiggle of text", rather than lining up the dropdown.

Obviously, if you style the select yourself, it's harder for us to get this right.

[Simon Fraser (smfr)]

Chrome is similar to WebKit. Firefox lines things up (but shows awful Windows-looking controls on Mac).

[Chris Rebert]

Yeah, this is admittedly nitpicky. I'm just forwarding the downstream user's concern upstream as a matter
of process. Personally I don't hold out much hope of this being "fixable".

The "fix" that comes to mind would be to indent the text so that there's sufficient room for the checkmark in the interactive state.

Although now that I look, even native AppKit selection widgets don't align in the way that's being 
suggested. So if we accept the behavior in question as being in keeping with OS X platform conventions,
then the "real" bug here is arguably the *vertical* misalignment between the top of the <select>
and the top of the dropdown menu, since that's what makes the horizontal positioning way more noticeable.
(Which is to say that the dropdown menu isn't covering the <select> like it does in native apps.)

[Simon Anez]

Created attachment 419133 [details]
Misaligned dropdown webkit

[Simon Anez]

Any updates regarding this?
We're forced to use a 3rd party JS library to be able to show a dropdown that looks aligned in WebKit browsers

[Ahmad Saleem]

@ap - Are these dropdown not from 'macOS' layer rather than something at WebKit level? Appreciate if you can share your input, it would be good learning for myself as well.

[Alexey Proskuryakov]

Yes, pretty certain that WebKit has the control over where exactly they show up.

[Aditya Keerthi]

Yes, WebKit has control over where these show up.

This is technically expected behavior, as WebKit attempts to match native macOS behavior (`NSPopUpButton`). The native behavior is that the text of the currently selected item in the dropdown is directly on top of the text of the control.

Though there does appear to be issues with the behavior in cases where the element does not have the native appearance. Nevertheless, fixing that would still have "horizontal misalignment" as described here.

One option would be to change the behavior for <select> without native appearance,