1796718 - Scale transformed text causing underline text decoration to be nonvisible

Status: NEW

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

Description

[nguyen]

Attachment: Screen Recording 2022-10-20 at 4.00.15 pm.mov

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Steps to reproduce:

1. Go to any website (https://en.wikipedia.org/ for example) on Firefox
2. Apply a text-decoration: underline css style to a paragraph
3. Apply a transform: scale(0.4) css style or some other scale value smaller than 1 until the underline style to be nonvisible

Browser user agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:106.0) Gecko/20100101 Firefox/106.0"

Actual results:

Some scaling value causing the underline style to disappear until apply another bigger scaling value

Expected results:

The underline decoration of the text should always be visible

Comment 1

[Xidorn Quan [:xidorn] UTC+10]

Attachment: testcase

To add to comment 0, the main problem here is not that when we reach certain scale level, the underline disappears onwards, but that the underline thickness is flickering, and at certain scale level, it totally disappears, but in a scale that is slightly smaller than it, it appears again.

Please see the testcase, if you drag the slider slowly to the left (or just keep pressing left arrow key), you can see the underline blinks, and at some specific levels, it sometimes disappears.

Comment 2

[Jonathan Kew [:jfkthame]]

It looks like we're independently snapping the top and bottom edges of the underline to device pixels, which probably isn't the best approach.

Trying other browsers, it looks like Safari snaps only the top of the underline, and then simply scales its width (so the bottom edge may not be sharp), and Chrome doesn't snap its position at all (so it becomes quite blurry under small scaling, but at least the behavior is smoother).

No solution seems ideal here, but something more like Safari's approach would be better than what we currently do, IMO.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Some of the snapping issue also happens with borders and so on, right? We snap to ensure at least one device pixel, but we can't account for transforms. That's bug 1258112