Open Bug 1806237 Opened 3 years ago Updated 2 years ago

Firefox on MacOS excludes space above text, resulting in text that is not vertically centered compared to other browsers

Categories

(Core :: Layout: Text and Fonts, defect)

Firefox 108
Unspecified
macOS
defect

Tracking

()

People

(Reporter: svanden96, Unassigned)

Details

Attachments

(3 files, 2 obsolete files)

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

Steps to reproduce:

Firefox on MacOS does not include equal space above and below the text, resulting in text that is not vertically centered. From my testing I have found that this includes Helvetica (the default system and san-serif font) and Times New Roman, as well as some imported Google Fonts, although it does not include Arial. The disparity in the spacing becomes more extreme as font size increases. This issue also does not seem to affect Firefox on Windows, which renders text with equal spacing on the top and bottom.

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Cocoa' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Widget: Cocoa
Product: Firefox → Core

you really need a testcase with descenders e.g. y and/or j

Component: Widget: Cocoa → DOM: CSS Object Model
OS: Unspecified → macOS
Attachment #9308803 - Attachment is obsolete: true

(In reply to Robert Longson [:longsonr] from comment #2)

you really need a testcase with descenders e.g. y and/or j

Added, thanks for your suggestion. I also included a letter with a diacritic.

Attachment #9308825 - Attachment is obsolete: true

Can you please link to the codepen or attach the test-case? Otherwise it's not easily actionable. Thanks!

Flags: needinfo?(svanden96)
Component: DOM: CSS Object Model → Layout: Text and Fonts
Flags: needinfo?(svanden96)

The severity field is not set for this bug.
:boris, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(boris.chiou)
Attached file testcase
Flags: needinfo?(boris.chiou)

I can reproduce this by the testcase from comment 8. So I put it into the attachments. Looks like the top space is smaller than the bottom space in the testcase.

Safari STP and Chrome Canary look better with this testcase.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true

I independently encountered this myself just now. I wasted quite a lot of time thinking I was doing something wrong in my CSS until I found this bug report.

I made a very simple <h1> with some text in it. Then I put a 1px red border around it. With the border in place, it's immediately obvious that the text is pushed up too close to the top of the h1 box. It should be vertically centered within the box.

I can confirm this bug is exclusive to Firefox on MacOS. I tried Safari and Chrome on MacOS. I tried Edge, Chrome, and Firefox on Windows. All of them had the text centered properly except for Firefox on MacOS.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: