1445596 - Canvas text scaling is messing up kerning

Status: NEW

(Core :: Graphics: Canvas2D, defect, P3)

Description

[konrad.garus]

Attachment: canvas_scaling_firefox.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180307142707

Steps to reproduce:

Render text with scaling on Canvas:

ctx.scale(3, 3);
ctx.font = "4pt arial";
ctx.fillText("Today, however, the Scottish contributed", 10, 20);

https://codepen.io/anon/pen/OvMGaK


Actual results:

The text has broken, very unpleasant kerning (see attached).


Expected results:

The text should have correct kerning, like the unscaled version (see attached).

Comment 1

[Aria Beingessner [:Gankra]]

Confirmed that this happens on nightly Linux (Normal DPI) and Windows (HiDPI), even with Webrender (I expect we fallback here, so same code). But it seems to look fine on MacOS (HiDPI)? Interesting.

Comment 2

[wbiggs1]

This is occurring for me as well on Windows 10 with 125% display scaling.

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0
Build ID: 20191030021342

The codepen in the original bug report: https://i.imgur.com/XH99niw.png
The most prominent place where the issue occurs, Google Docs / Sheets: https://i.imgur.com/9DZQtNF.png

Comment 3

[sedatk]

This is currently the only reason I can't use Firefox as a daily driver because I use Google Docs & Sheets frequently, and the bad kerning makes the text unreadable.