Closed Bug 1696931 Opened 4 years ago Closed 4 years ago

On macOS, selected <option> has inconsistent line-height due to ✓ character

Categories

(Core :: Widget: Cocoa, defect)

Product:
Core
Component:
Widget: Cocoa
Version:
Firefox 87
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
88 Branch
Tracking Flags:
Tracking Status
firefox88 --- fixed

People

(Reporter: josh.tumath+bugzilla, Assigned: emilio)

Details

Attachments

(3 files)

Screenshot of bug from test case in CodePen
75.68 KB, image/png
Details
Bug 1696931 - Prevent osx menu checkmark from growing the line. r=mstange
48 bytes, text/x-phabricator-request
Details | Review
Bug 1696931 - Use even padding in menuitems on OSX. r=mstange
48 bytes, text/x-phabricator-request
Details | Review

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:87.0) Gecko/20100101 Firefox/87.0

Steps to reproduce:

Test case: https://codepen.io/joshtumath/pen/eYBPRrG

  1. On macOS, create a HTML page with a <select> with <option>s.
  2. Using CSS, apply a custom font to the <body> and set select { font-family: inherit; }
  3. Open the select menu.

Actual results:

The line height is inconsistent on the row with the ✓ character. Also, the font has changed from the macOS system default - but not to the custom font that I've set.

Expected results:

Each option's line height should be the same, and it should be using the default system font for select options.

I can confirm this problem. @emilio maybe this can be addressed in the non-native theme work?
Also note: Chrome and Safari don't fall back to a "serif" checkmark.

Status: UNCONFIRMED → NEW
Component: Widget: Cocoa → Layout: Form Controls
Ever confirmed: true

I can poke, but this is not particularly related to non-native theme.

Component: Layout: Form Controls → Widget: Cocoa
Flags: needinfo?(emilio)
Assignee: nobody → emilio
Status: NEW → ASSIGNED

Otherwise with some fonts the menus look off. This doesn't change visual
appearance with the default font, afaict (but I don't have such a good eye so
please double-check).

Maybe we should do this only for the content select dropdown, but then again my
untrained eye doesn't see an issue for other menuitems either so...

Depends on D107629

So there's the line-height issue, and then with that fixed there's ugliness from this uneven padding. With the default font, that looks about right, but with a custom font like the test-case it really looks quite off.

Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f53eb7a72c4d Prevent osx menu checkmark from growing the line. r=mstange https://hg.mozilla.org/integration/autoland/rev/02c0f8ec7483 Use even padding in menuitems on OSX. r=mstange

Backed out 2 changesets (bug 1696931) for causing mochitest failures in test_menulist_position.xhtml
Backout link: https://hg.mozilla.org/integration/autoland/rev/c536111e7e4c69f35e388fe12f254dda8fd8d807
Push with failures, failure log.

Flags: needinfo?(emilio)
Flags: needinfo?(emilio)
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/dda4e84b3332 Prevent osx menu checkmark from growing the line. r=mstange https://hg.mozilla.org/integration/autoland/rev/c9b1ea465836 Use even padding in menuitems on OSX. r=mstange

https://hg.mozilla.org/mozilla-central/rev/dda4e84b3332
https://hg.mozilla.org/mozilla-central/rev/c9b1ea465836

Status: ASSIGNED → RESOLVED
Closed: 4 years ago
status-firefox88: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 88 Branch
QA Whiteboard: [qa-88b-p2]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: