Closed Bug 1546818 Opened 3 years ago Closed 3 years ago

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


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




Tracking Status
firefox-esr60 --- unaffected
firefox-esr68 --- disabled
firefox66 --- unaffected
firefox67 --- wontfix
firefox68 --- wontfix
firefox69 + verified


(Reporter: rowbot, Assigned: kvark)




(Keywords: regression)


(6 files)

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


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

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.

The text should not be rendered upside down.

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

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.

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).

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.

Flags: needinfo?(dmalyshau)
Keywords: regression
Priority: -- → P2
Regressed by: 1524797

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

Assignee: nobody → dmalyshau
Flags: needinfo?(dmalyshau)

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

Flags: needinfo?(aosmond)

(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.

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

(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.

Flags: needinfo?(aosmond)
See Also: → 1525641
Closed: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1525641

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.

Resolution: DUPLICATE → ---
Attached file reduced-test.html

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

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.

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

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.

Hi Dzmitry, any updates on this one for 68?

Flags: needinfo?(dmalyshau)

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

Flags: needinfo?(dmalyshau)

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.

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

Attached file reduced-test2.html

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

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.

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

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

Blocks: wr-69
No longer blocks: wr-68

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

Keywords: leave-open

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

OS: Unspecified → All
Hardware: Unspecified → All

A better fix is in flight now

Keywords: leave-open
Pushed by
Change WR text transform to be relative to the surface raster node r=gw
Closed: 3 years ago3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla69
Flags: qe-verify+

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.

Flags: qe-verify+
Has Regression Range: --- → yes
You need to log in before you can comment on or make changes to this bug.