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)
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.
Comment 1•3 years ago
|
||
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.
Comment 2•3 years ago
|
||
you really need a testcase with descenders e.g. y and/or j
(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.
Comment 7•3 years ago
|
||
Can you please link to the codepen or attach the test-case? Otherwise it's not easily actionable. Thanks!
Updated•3 years ago
|
Comment 9•3 years ago
|
||
The severity field is not set for this bug.
:boris, could you have a look please?
For more information, please visit auto_nag documentation.
Comment 10•3 years ago
|
||
Comment 11•3 years ago
•
|
||
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.
Updated•3 years ago
|
Comment 12•2 years ago
|
||
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.
Description
•