Open Bug 1429347 Opened 6 years ago Updated 8 months ago

Different vertical position of large text in browsers on Windows vs in browsers on MacOS

Categories

(Core :: Layout: Text and Fonts, enhancement, P3)

57 Branch
enhancement

Tracking

()

People

(Reporter: tobi, Unassigned)

Details

Attachments

(6 files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20180103231032

Steps to reproduce:

Open
https://tobireif.com/non_site_stuff/test_case_for_font_position_report/
in Firefox on Mac and in Firefox on Windows.


Actual results:

The text position currently is different:

The space above the large text is 103px in Firefox on Mac
vs 126px in Firefox on Windows.

The space below the large text is 76px in Firefox on Mac
vs 53px in Firefox on Windows.


Expected results:

The space above and below the large text should be the same in Chrome across OSs.
I need consistent rendering / consistent large-text-positioning across the major OSs (including all major browsers) (which should include Firefox, Chrome, Edge, Safari, etc).

I'll attach a set of screenshots which shows that (currently) several major browsers share one larger-text-position on Mac and a different one on Windows. (the ones I checked: Mac Firefox,Chrome vs Windows Edge,Firefox,Chrome)

Which rendering / which text position is the correct one?

Perhaps the position in the middle (between Mac and Windows) would be a good compromise / a good objective for all browser vendors?

(By the way, I'm talking about the major difference in text positioning in browsers on Windows vs on Mac, not about the minor differences in text positioning in browsers on the same respective OS. The latter is negligible.)
Attached image mac_firefox.png
Attached image mac_chrome.png
Attached image windows_chrome.png
Attached image windows_edge.png
Attached image windows_firefox.png
Severity: normal → enhancement
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout: Text
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core
Hardware: Unspecified → All
(Didn't check carefully, but) I suspect this font has some weird baseline setting and thus different platform picks different value...

It seems to me that on Windows, the baseline is shifted downwards.
I tried it with a different font and I can't spot much difference on Mac vs Windows:

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10301051/snapshots/z5e80f846dffbc5ca464

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10301061/snapshots/zc112792724f978bc0a7


I hope the issue can get resolved in some way so that this page (incl. this font) (and all pages/fonts of that type

https://tobireif.com/non_site_stuff/test_case_for_font_position_report/

get rendered consistently across OSs.
Please let me know if there's anything I could supply / try / test or anything else.

For my and many other large-text based layouts using web-fonts it's crucial to get consistent positioning/metrics across OSs.
Screenshot of the above test-page in Firefox on Mac OS:

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10911866/snapshots/zb1f070fe9218dd65fae

Screenshot of the above test-page in Firefox on Windows:

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10911874/snapshots/z3c8723dc4348de33662

I hope that the issue can get resolved in some way. It affects layout quote drastically.
There's some recent discussion at https://github.com/w3c/csswg-drafts/issues/2228 .
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.