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

Status: NEW

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

Description

[Tobi Reif]

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.

Comment 1

[Tobi Reif]

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.)

Comment 2

[Tobi Reif]

Attachment: mac_firefox.png

Comment 3

[Tobi Reif]

Attachment: mac_chrome.png

Comment 4

[Tobi Reif]

Attachment: windows_chrome.png

Comment 5

[Tobi Reif]

Attachment: windows_edge.png

Comment 6

[Tobi Reif]

Attachment: windows_firefox.png

Comment 7

[Tobi Reif]

Bug reports for other browsers:

Edge:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15204186/

Chrome:
https://bugs.chromium.org/p/chromium/issues/detail?id=800693

Comment 8

[Xidorn Quan [:xidorn] UTC+10]

(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.

Comment 9

[Xidorn Quan [:xidorn] UTC+10]

Attachment: font in the testcase

Comment 10

[Tobi Reif]

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.

Comment 11

[Tobi Reif]

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.

Comment 12

[Tobi Reif]

Another test-page:
https://tobireif.com/non_site_stuff/test_case_for_font_position_report_yet_another_font/

Comment 13

[Tobi Reif]

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.

Comment 14

[Tobi Reif]

There's some recent discussion at https://github.com/w3c/csswg-drafts/issues/2228 .

Comment 15

[Tobi Reif]

Also see https://bugzilla.mozilla.org/show_bug.cgi?id=1681691