bugzilla.mozilla.org has resumed normal operation. Attachments prior to 2014 will be unavailable for a few days. This is tracked in Bug 1475801.
Please report any other irregularities here.

[Linux] Letters have different height in talky.io chat

RESOLVED INVALID

Status

Tech Evangelism
Desktop
RESOLVED INVALID
a year ago
a year ago

People

(Reporter: bogdan_maris, Unassigned, NeedInfo)

Tracking

Firefox Tracking Flags

(firefox53 affected, firefox54 affected, firefox55 affected)

Details

(Whiteboard: [needsdiagnosis])

Attachments

(1 attachment)

Created attachment 8861050 [details]
Screenshot showing the issue

[Affected versions]:
- Firefox 53.0
- Firefox 54 beta 1
- latest Nightly 55.0a1

[Affected platforms]:
- Ubuntu 16.04 32bit

[Steps to reproduce]:
1. Start Firefox
2. Visit https://talky.io/ and make a room
3. Open chat window from lower right
4. Type the following text: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...TESTTESTTESTTEST"

[Expected result]:
- Words are correctly displayed in chat window.

[Actual result]:
- Some letters have incorrect height.

[Regression range]:
- Not a recent regression, it reproduces back on Firefox 41.0.1 and could be on Talk.ios side (not sure of this).

[Additional notes]:
- This is only Ubuntu specific, the issue can't be seen on other platforms (win, mac) and also Chromium is not affected.
-
Also forgot to add to additional notes:
- The checkbox from the lower chat window is barely visible only on Ubuntu as well. Let me know if I should log a new bug on that or would this take care of that as well.
This very much looks like some font fallback issue. Could you check the Font panel in the inspector for what fonts are the element using?
Flags: needinfo?(bogdan.maris)
My guess is that the site is deploying a webfont, but in order to "protect" the resource it has been split into two (or more) resources, each providing a subset of the glyphs. Thus, neither resource is really useful as a standalone font. This idea was briefly popular earlier in the webfont era, but it's a really bad strategy. Here, what I think is happening is that there are two such "interleaved" font faces, and because they're separate fonts, auto-hinting is applied independently to the two sets of glyphs -- and happens to make different decisions about snapping glyph heights to whole pixels.

The behavior probably depends on local font rasterizing/hinting choices -- it may be possible to avoid it by changing fontconfig options, for example -- but is primarily a result of a badly-created site.

Assuming this is correct, it should be a Tech Evangelism issue. Splitting a single font face into multiple separate resources will sabotage the font rasterizer's efforts to apply consistent hinting across all the glyphs, and the result is a mess like this.
Component: Layout: Text → Desktop
Product: Core → Tech Evangelism
Whiteboard: [needsdiagnosis]
(In reply to Xidorn Quan [:xidorn] UTC+10 (less responsive 15/Apr-3/May) from comment #2)
> This very much looks like some font fallback issue. Could you check the Font
> panel in the inspector for what fonts are the element using?

As far as I can see they use two different fonts in the chat: Gotham Rounded A and Gotham Rounded B.
For example: 
- 'A' - is displayed using Gotham Rounded A
- 'T' - is displayed using Gotham Rounded B
Flags: needinfo?(bogdan.maris)
Sounds like it pretty much matches what jfkthame described above.
Not a mozilla bug.  Lance?
Status: NEW → RESOLVED
Last Resolved: a year ago
Flags: needinfo?(lance)
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.