534064 - Text becomes stairstepped / janky when rotated using moz-transform with GDI

Status: REOPENED

(Core :: Layout: Text and Fonts, defect)

Description

[cabel]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-us) AppleWebKit/531.21.8 (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5

When using "-moz-transform: rotate(3deg)" on an element containing text, the text becomes stairstepped. I.e., individual letters seem to be higher and lower than each other, and not placed along a smooth baseline. This makes things look, well, bad.

The same text renders fine and smooth when using "-webkit-transform" in Safari or Chrome.

The attached screenshots show how it looks on different platforms/browsers.

Reproducible: Always

Steps to Reproduce:
1. Apply -moz-transform: rotate(3deg); style to a div containing text

Actual Results:  
The text is stair stepped and not along a smooth baseline.

Expected Results:  
The text is smooth. and aligned.

Comment 1

[cabel]

Attachment: Firefox: Mac (Bad)

Comment 2

[cabel]

Attachment: Firefox: Windows (Really Bad)

Comment 3

[cabel]

Attachment: Safari: Mac (Looks Good)

Comment 4

[cabel]

Attachment: Safari:Win (Looks Good)

Comment 5

[cabel]

(Bug #501028 at first seemed to be the same, but it's relating to text that is moving around constantly even though an element in stationary. Bug #403447 seems extremely close but is related to SVG.)

Comment 6

[philippe (part-time)]

dupe of bug 492214 ?

Comment 7

[cabel]

Sure looks like it to me. I will close this bug?

Comment 8

[Jeff Muizelaar [:jrmuizel]]

Fixing this will be tricky because of how GDI works. If you take a look with a recent version of Safari you should see the same problem. However the problem should go away with DirectWrite.

Comment 10

[Aleksander Machniak]

Still an issue in Firefox 47 (linux). Even happens with rotation values that look simpler to align, e.g. 45deg. Not an issue in Chromium.

Comment 11

[F. Rauch]

Also still seeing this on Firefox 49 (Windows 8.1). Neither Chrome nor IE have this issue.

Comment 12

[Alice0775 White]

404 Error

Comment 13

[David Shin[:dshin]]

Attachment: Reduced testcase from Pangram

Hm, this still happens, as reported by :bvisness for https://www.pangram.com/.
Notably, I'm seeing this on Ubuntu 24.04. So, not GDI related (Which seems Windows specific).
Pinch zooming (i.e. APZ Zooming) "fixes" the issue at the cost of making the text look blurry.

On OSX, issue still seems to exist, but less noticeable.
On Android, things seem... Ok?

Comment 14

[David Shin[:dshin]]

Attachment: Testcase with Ahem

Comment 15

[David Shin[:dshin]]

Attachment: Rendering with Ahem testcase

... Oddly enough, with some font sizes, it almost looks like font progress at a slightly off angle, and gets periodically "reset."
EDIT: Ok.. Using the screenshot tool hides the issue.

Comment 16

[David Shin[:dshin]]

Attachment: Rendering with Ahem testcase showing the staircasing