1761685 - (sw-wr) Element with "transform: scaleX" and "image-rendering" becomes corrupted

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect)

Description

[Timo Tijhof]

When an element with image-rendering: crisp-edges; (or image-rendering: pixelated;) uses transform (e.g. to invert it with scaleX(-1)), it becomes corrupted or even dissappears completely.

It seems to be specific to elements with PNG or SVG background images, as I could not reproduce it on elements with plain text content or with a linear gradient as background image.

Isolated test case: https://codepen.io/Krinkle/full/Exomjgv

<span style="
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 45%; left: 45%;
background-image: url(https://treasure21.timotijhof.net/src/dino.png);
image-rendering: crisp-edges;
background-size: 100% 100%;
transform: scaleX(-1);
"></span>

Live example: https://treasure21.timotijhof.net/vault.html

Browsers:

• Firefox 99 on Windows 11: Broken.
• Firefox 90 on Windows 11: Broken.
• Firefox 80 on Windows 11: OK.
• Firefox 70 on Windows 11: OK.
• Firefox 88 on Linux: Broken.
• Firefox 45 on Linux: OK.
• Firefox 98 on macOS: OK.
• Safari 15: OK.
• Chrome 99: OK.

Possibly related:

• Text invisible if font is Courier and transform used. https://bugzilla.mozilla.org/show_bug.cgi?id=670306
• Caret invisible when using scaleX. https://bugzilla.mozilla.org/show_bug.cgi?id=940671
• -moz-transform: scaleX(-1) distorts image. https://bugzilla.mozilla.org/show_bug.cgi?id=683707

Comment 1

[Timo Tijhof]

Attachment: visual-example.png

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Seems to work here on Nightly and Stable (on Linux)

Comment 3

[Alice0775 White]

I can reproduce the issue in Nightly100.0a1 Windows10 if HWA is disabled (i.e. sw-wr).

Comment 4

[Alice0775 White]

Also reproduced in Firefox97.0.

Regression window(with sw-wr):
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=22e706c2ff1d4469907bc44c8c1bc256512553e7&tochange=bfe0b7fdfc027afbff4e2d9002a771d92d3bee41

Suspect; Bug 1686244

Comment 5

[Lee Salzman [:lsalzman]]

Attachment: Bug 1761685 - Check for negative step in blendTextureNearestRepeat. r?aosmond

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1686244

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5422107de8e9
Check for negative step in blendTextureNearestRepeat. r=gfx-reviewers,jrmuizel

Comment 8

[Cristina Cozmuta (:CrissCozmuta)]

https://hg.mozilla.org/mozilla-central/rev/5422107de8e9