Artifacts when using background-blend-mode with gradients

NEW
Unassigned

Status

()

Core
Graphics
P3
normal
3 years ago
a month ago

People

(Reporter: Matthew Dapena-Tretter, Unassigned)

Tracking

({testcase})

37 Branch
x86
Mac OS X
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [gfx-noted])

Attachments

(3 attachments)

(Reporter)

Description

3 years ago
Created attachment 8603484 [details]
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

3 years ago
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.
Flags: needinfo?(m)
Keywords: testcase
OS: Unspecified → Mac OS X
Hardware: Unspecified → x86
(Reporter)

Comment 2

3 years ago
Created attachment 8603513 [details]
Screenshot of the problem
Flags: needinfo?(m)
(Reporter)

Comment 3

3 years ago
Created attachment 8603514 [details]
Expected behavior (Chrome)
(Reporter)

Comment 4

3 years ago
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

3 years ago
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.
Component: Untriaged → Graphics
Flags: needinfo?(m)
Product: Firefox → Core
(Reporter)

Comment 6

3 years ago
> 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
Flags: needinfo?(m)
I confirmed the problem on mac. I did not sees the problem on win.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(sotaro.ikeda.g)
Whiteboard: [gfx-noted]

Comment 8

a year ago
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

a year ago
I'm also seeing the bug on the Mac.  OSX 10.11.2  Haven't tested Windows.
This seems to be fixed in Nightly.

Updated

9 months ago
Flags: needinfo?(sotaro.ikeda.g)
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.