1835515 - "image-rendering: pixelated" <img> elements have scaling artefacts

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[majaharding]

Attachment: firefox_stripe_image_problem.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/113.0

Steps to reproduce:

Create a scaled-up image with "image-rendering: pixelated" applied.

Actual results:

The scaled-up image has strange kinks in straight lines, which I've circled in the screenshot. These artefacts can move or disappear when you change to a different tab and back, so you may need to try a few times to catch them.

Expected results:

Straight lines in the source image should have been preserved. Columns of pixels in the output image should all have the same colour.

Comment 1

[majaharding]

Attachment: stripetest_img.html

Comment 2

[majaharding]

I've also reported a possibly related bug that I found at the same time here: https://bugzilla.mozilla.org/show_bug.cgi?id=1835514

Comment 3

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

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 4

[majaharding]

For completeness: I've also reported a somewhat similar Chromium bug to their bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1449512

Comment 5

[Teodor Tanasoaia [:teoxoy]]

I can reproduce this, also in Chrome. It's also reproducible without scaling the image up (removing height: 100%).

Glenn, do you know what the cause of this might be? It's odd that a vertical line would be sampled differently based on the Y pos.

Comment 6

[majaharding]

I can also reproduce this on another Nvidia GPU desktop, as well as an Nvidia/Intel dual graphics laptop. I've also spotted it in Chrome too.

Tellingly, on the dual GPU laptop the artefacts only appear when running Firefox on the Nvidia GPU, and not on the Intel GPU. That suggests to me that it's graphics driver or hardware related. @Teodor, what kind of graphics device did you reproduce this on?

The artefacts often appear on the diagonal line from bottom left to the top right, or sometimes in a horizontal line starting from that diagonal. I'll attach some more images of patterns I've seen.

Comment 7

[majaharding]

Attachment: Nvidia 960 Chrome.PNG

Comment 8

[majaharding]

Attachment: Nvidia 630M Firefox.PNG

Comment 9

[majaharding]

Although strangely, in Chrome, I can only reproduce it on one of my desktop machines, but not the other desktop or the laptop. Even though I can reproduce it on all three in Firefox.

I'm not sure what this tells us.

Comment 10

[Glenn Watson [:gw]]

It looks like it's probably some kind of float accuracy issue, perhaps. Hard to say without investigating whether it's GPU/driver related or something we can control from the shader side of things. It doesn't appear to reproduce on my local machine which is an AMD WX 3200 GPU.

Comment 11

[Teodor Tanasoaia [:teoxoy]]

@Teodor, what kind of graphics device did you reproduce this on?

The artefacts often appear on the diagonal line from bottom left to the top right, or sometimes in a horizontal line starting from that diagonal. I'll attach some more images of patterns I've seen.

I'm on a laptop with an Nvidia dGPU as well.