Closed Bug 1359104 Opened 3 years ago Closed 3 years ago

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

Categories

(Web Compatibility :: Desktop, defect)

All
Linux
defect
Not set

Tracking

(firefox53 affected, firefox54 affected, firefox55 affected)

RESOLVED INVALID
Tracking Status
firefox53 --- affected
firefox54 --- affected
firefox55 --- affected

People

(Reporter: bogdan_maris, Unassigned, NeedInfo)

Details

(Whiteboard: [needsdiagnosis])

Attachments

(1 file)

[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
Closed: 3 years ago
Flags: needinfo?(lance)
Resolution: --- → INVALID
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.