1163093 - Artifacts when using background-blend-mode with gradients

Status: RESOLVED WORKSFORME

(Core :: Graphics: WebRender, defect, P3)

Description

[Matthew Dapena-Tretter]

Attachment: bug.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20150415140819

Steps to reproduce:

1. Apply two background images: a linear gradient (with opacity) and a jpeg.
2. Set the blend mode to color-dodge.


Actual results:

The image is rendered with artifacts.


Expected results:

The image should have a smooth (though barely noticeable) gradient.

Comment 1

[Gingerbread Man]

I don't spot a difference in the rendering between Firefox and Opera on Windows 7, or Firefox and Chromium in Linux Mint KDE 17.1.

Please test in a brand new profile.
https://support.mozilla.org/kb/profile-manager-create-and-remove-firefox-profiles

If the problem persists,
1. Attach a screenshot of the problem.
2. Type about:support into the location bar and press Enter.
3. Copy the Graphics section to the clipboard, paste the clipboard contents in the comment box here, then submit the reply.

Comment 2

[Matthew Dapena-Tretter]

Attachment: Screenshot of the problem

Comment 3

[Matthew Dapena-Tretter]

Attachment: Expected behavior (Chrome)

Comment 4

[Matthew Dapena-Tretter]

Sorry, this is Mac OS.

Device ID	0x fe9
GPU Accelerated Windows	1/1 OpenGL (OMTC)
Vendor ID	0x10de
WebGL Renderer	NVIDIA Corporation -- NVIDIA GeForce GT 750M OpenGL Engine
windowLayerManagerRemote	true
AzureCanvasBackend	quartz
AzureContentBackend	quartz
AzureFallbackCanvasBackend	none
AzureSkiaAccelerated	0

Comment 5

[Gingerbread Man]

Thank you for the update.

Does the image render properly when you open it directly, rather than the containing web page?

Does the testcase web page render properly when you do the following?
1. In the address bar, paste the following, then press Enter:
about:config?filter=layers.offmainthreadcomposition.enabled
2. To bypass the warning, press the big button labeled “I'll be careful, I promise!”.
3. In the search results, double-click “layers.offmainthreadcomposition.enabled” to set its value to “false”.
4. Restart Firefox.

(In reply to Gingerbread Man from comment #1)
> I don't spot a difference in the rendering between Firefox and Opera on
> Windows 7, or Firefox and Chromium in Linux Mint KDE 17.1.

OMTC on in Windows 7, but off in Linux Mint KDE 17.1 (stuck with an unsupported graphics driver, so no way around it).

Bug 1135271 might be related.

Comment 6

[Matthew Dapena-Tretter]

> Does the image render properly when you open it directly, rather than the containing web page?

Yes

> Does the testcase web page render properly when you do the following?

No

Comment 7

[Sotaro Ikeda [:sotaro]]

I confirmed the problem on mac. I did not sees the problem on win.

Comment 8

[Alecazam]

Here's a fiddle with color-dodge bug.  Chrome renders this properly.  Firefox and Safari don't.  This is a series of gradient paints.  The top paint is color-dodge, the lower paint is normal blend.

https://jsfiddle.net/alecazam/xhsg4wm6/31/

Comment 9

[Alecazam]

I'm also seeing the bug on the Mac.  OSX 10.11.2  Haven't tested Windows.

Comment 10

[Biru [:poiru]]

This seems to be fixed in Nightly.

Comment 11

[Gregory Pappas [:gregp]]

Attachment: Updated test case

Comment 12

[Gregory Pappas [:gregp]]

Reporter, are you still experiencing this issue?

Comment 13

[Gregory Pappas [:gregp]]

Unable to reproduce.

Reporter, please file a new bug if you are still experiencing this issue.