1546818 - Text rendered upside down with clipping artifacts during CSS transform: matrix3d animation

Status: VERIFIED FIXED

(Core :: Graphics: WebRender, defect, P2)

Description

[Trevor Rowbotham [:rowbot]]

I am using the latest Nightly on Windows 10. Disabling Webrender fixes the issue.

STR:

1. Visit https://www.cheeseandburger.com
2. Flip through the burger cards with the slider at the bottom or by using the scroll wheel/arrows on either side.

AR:
The text, the name of the burger and it's featured cheese, are rendered upside down and seem to have clipping artifacts and scaling issues.

ER:
The text should not be rendered upside down.

Please let me know if I can provide any additional information.

Comment 1

[Andrew Osmond [:aosmond] (he/him)]

Attachment: Screencast from 2019-04-25 10:32:48 AM.webm

I can reproduce on Linux. If you watch the text carefully as it flips through the cards, you can see it is rendered upside down (or mirrored?) until it stops.

Comment 2

[Aria Beingessner [:Gankra]]

I can't reproduce this on my mac or windows machine, but I can on the linux one. It would seem that this bug only shows up on devicePixelRatio=1 devices (non-hidpi).

Comment 3

[Andrew Osmond [:aosmond] (he/him)]

I did not realize it at the time, but you can see in the video I have a 30% zoom applied. Without any zoom I could not reproduce.

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=9a69e1fea9be909ba3ebcb2f326a7ed18a0d9003&tochange=87dac4d84c6b78511849fe117c327620980b4ee2

Comment 4

[Dzmitry Malyshau [:kvark]]

Thanks for finding the regression! This could be related to 1525641.

Comment 5

[Pascal Chevrel:pascalc (PTO until April 26)]

Andrew, 67 is marked as affected and you set this as a P2 so I take it that this is a wontfix for 67, can you confirm? Thanks

Comment 6

[Trevor Rowbotham [:rowbot]]

(In reply to Andrew Osmond [:aosmond] from comment #3)

I did not realize it at the time, but you can see in the video I have a 30% zoom applied. Without any zoom I could not reproduce.

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=9a69e1fea9be909ba3ebcb2f326a7ed18a0d9003&tochange=87dac4d84c6b78511849fe117c327620980b4ee2

Interesting. Here is what I found when applying different zoom levels in Firefox, with 100% being the default.

• 30% works as expected
• 50%-133% exhibits the broken behavior
• 150%-300% works as expected

Some additional details about my environment, in-case it's helpful:
Resolution: 2560x1440
Refresh Rate: 144hz
Windows Scaling: 100%
GPU: nvidia RTX 2080
Driver: 430.39

Comment 7

[Andrew Osmond [:aosmond] (he/him)]

(In reply to Pascal Chevrel:pascalc from comment #5)

Andrew, 67 is marked as affected and you set this as a P2 so I take it that this is a wontfix for 67, can you confirm? Thanks

I mostly wanted to defer this to Dzmitry; with his feedback in comment 4, I suspect this won't be a quick/easy fix since there has been a similar problem open for a while. As such, I agree this is wontfix for 67.

Comment 9

[Trevor Rowbotham [:rowbot]]

Unfortunately, this was not fixed by bug 1525641. I went back and took a closer look at this and I have found that the broken behavior is related to window size, at least for me. A window with an innerWidth of greater than 1600 causes the broken behavior. An innerWidth of 1600 or less does not exhibit the broken behavior.

Comment 10

[Aria Beingessner [:Gankra]]

Attachment: reduced-test.html

Here's a reduced version of this test case in html. Will have a wrench yaml up in a bit.

Comment 11

[Trevor Rowbotham [:rowbot]]

From the reduced test case, removing the transform-origin: bottom property on the .bottom class seems to be the culprit for the upside down, clipped text.

Comment 12

[Aria Beingessner [:Gankra]]

Attachment: transformed-to-heck.yaml

here's a wrench yaml based on my capture of the test case

Comment 13

[Aria Beingessner [:Gankra]]

I suspect this problem may be related to Bug 1474294, in that there's a series of transforms that aren't followed by preserve-3d nodes, and adding more preserve-3d's seems to fix the problem. Just a guess though, will find out when we fix that bug.

Comment 14

[Patricia Lawless]

Hi Dzmitry, any updates on this one for 68?

Comment 15

[Dzmitry Malyshau [:kvark]]

No, Patricia, sorry, I haven't come back to this one. Will have a look now.

Comment 16

[Dzmitry Malyshau [:kvark]]

The text is X and Y flipped relative to the spatial node of the surface it draws to. Still considered an AxisAligned transform...
I suspect the flattening of such transforms (that just flip X and Y) is not done correctly, need to compare with Gecko.

Comment 17

[Dzmitry Malyshau [:kvark]]

Got distracted a bit by the fact our debug primitive IDs don't work properly when replaying a capture. NEXT_PRIM_ID is static...

Comment 18

[Dzmitry Malyshau [:kvark]]

Attachment: reduced-test2.html

Smaller reduced test case. Interestingly, changing the perspective from 2000px to 1900px makes it work correctly.

Comment 19

[Dzmitry Malyshau [:kvark]]

The bug occurs when the combination of factors occur:

• we make a decision to transform glyphs in "update_font_instance"
• we decide to render to an intermediate surface (still Screen raster space)
• transformation from the glyph to that surface involves flipping or rotation

The "ps_text_run" shader attempts to work out the coordinates in the special "glyph" space, which is the local transformed by the 2D component of the world scale and rotation. Perhaps, what's happening is the confusion of the shader since the "world" transform it receives is actually relative to the surface we render into, not the real world.

Comment 20

[Dzmitry Malyshau [:kvark]]

Attachment: WR text local transform fix

Change the glyph transform computation to be relative to the surface node.

Comment 21

[Jeff Muizelaar [:jrmuizel]]

[Tracking Requested - why for this release]: This is a noticeable correctness problem that we should make sure we fix for 69

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0bee4245b65a
WR text local transform fix r=gw

Comment 23

[Dzmitry Malyshau [:kvark]]

Interestingly, on "https://www.cheeseandburger.com/machonacho" there is still a bit of an issue left: the flipped pages are good, but the one at the bottom sometimes stays upside down :/

Comment 24

[Dzmitry Malyshau [:kvark]]

Attachment: Change WR text transform to be relative to the surface raster node

a follow-up to D36603 that switches the base space from the surface node to the raster node.

Comment 25

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/0bee4245b65a

Comment 26

[Dzmitry Malyshau [:kvark]]

A better fix is in flight now

Comment 27

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/877ce94bb4fd
Change WR text transform to be relative to the surface raster node r=gw

Comment 28

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/877ce94bb4fd

Comment 29

[Alexandru Trif, Desktop QA [:atrif]]

Hello!
Reproduced the issue with Firefox 68.0a1 (20190424215525) on Windows 10 using test cases from comment 10 and comment 18 and changing zoom until the text was rendered upside down.
The issue is verified fixed using Firefox 69.0b7 (20190722201635) on Windows 10x64, macOS 10.14 and Ubuntu 18.04.