1771708 - background-blend-mode: color artifact on image

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[kolosov]

Attachment: photo_2022-05-30_10-03-07.jpg

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:101.0) Gecko/20100101 Firefox/101.0

Steps to reproduce:

https://codepen.io/cerbiz/pen/YzeemWm
Style background-blend-mode: color; with background image

Actual results:

artifact on background image, but works fine with background-blend-mode: color-burn;

Expected results:

gradient on image from white to transparent

Comment 1

[kolosov]

Attachment: Снимок экрана от 2022-05-30 10-35-57.png

Comment 2

[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 3

[Mayank Bansal]

The codepen link you posted doesnt look nothing like the screenshot attached. Is there a different Codepen demo you wanted to share?

Comment 4

[kolosov]

Attachment: lines on codepen

my first screenshot from a real project. This one is from the codepen, the problem remains, but it manifests itself differently (noise in the form of lines in the image).

Comment 5

[kolosov]

(In reply to Mayank Bansal from comment #3)

The codepen link you posted doesnt look nothing like the screenshot attached. Is there a different Codepen demo you wanted to share?

Yeap this different screen but on Codepen i see this bug (lines)
attached screenshot from codepen, thanks!
(In reply to Mayank Bansal from comment #3)

Comment 6

[Mayank Bansal]

Regression points to when WR was enabled for my GPU. with WR force enabled, i can repro as far back as May-2020.

Comment 7

[Alex]

Attachment: Same issue in Firefox and Edge.png

I can actually reproduce this in both Firefox and Edge, and it's worse in Edge.