Bug 1761685 Comment 0 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Revision 1 by
on 
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

```html
<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

Back to Bug 1761685 Comment 0