1835514 - "image-rendering: pixelated" canvases are unstable over redraws.

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[majaharding]

Attachment: flickering lines demo.mp4

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

Steps to reproduce:

If you set a scaled-up canvas to have "image-rendering: pixelated", the exact mapping from source pixels to scaled pixels changes between re-draws, causing visual flickering. You can cause a re-draw by hovering over UI elements such as different tabs, or using javascript to paint to the canvas.

Actual results:

Random pixel widths change between redraws, flickering back and forth. Which exact columns of pixels are flickering can be changed by hovering over different UI elements. See the attached video.

Expected results:

The exact scale mapping should stay constant and should not change over time. (Probably, it should also be stable over things like size and position.)

Comment 1

[majaharding]

Attachment: stripetest.html

Comment 2

[majaharding]

I've also reported a possibly related bug with "pixelated" on images here: https://bugzilla.mozilla.org/show_bug.cgi?id=1835515

Comment 3

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

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

Comment 4

[Teodor Tanasoaia [:teoxoy]]

Thanks for the report! I can't seem to be able to reproduce the flickering. Can you attach the contents of your about:support?

Comment 5

[majaharding]

Attachment: about support.txt

Comment 6

[majaharding]

Attachment: about support json.txt

Comment 7

[majaharding]

There you go.

You may need to play around, change the size of the window etc. to see it. The flickering is intermittent and a bit fickle (on my machine anyway).

Comment 8

[majaharding]

I was able to reproduce this on two different Desktop computers (with Nvidia GPUs) and my Laptop (both using it's Nvidia GPU and it's Intel GPU).

I found that it was much harder to make it happen on the laptop than the desktops. It seemed to only happen when the window was small, about a quarter of the size of the screen. I'll attach a video of of what that looks like.
I also saw strange mode of flickering, where not all of the pixels in the same column were changing. I'll attach that too.

Comment 9

[majaharding]

Attachment: Firefox Laptop Nvidia.mp4

Comment 10

[majaharding]

Attachment: Firefox Laptop Nvidia Rough Line.mp4

Comment 11

[Teodor Tanasoaia [:teoxoy]]

Thanks for the info! I'm still unable to reproduce it however, this most likely has the same root cause as 1835515.