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

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

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

Also reproduced in Firefox97.0.

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

Suspect; Bug 1686244

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

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