Bug 133842 - [CSS Blending] Rendering defects when using background-blend-mode on a radial-gradient background image
Summary: [CSS Blending] Rendering defects when using background-blend-mode on a radial...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 108546
  Show dependency tree / graph
 
Reported: 2014-06-13 01:20 PDT by Ion Rosca
Modified: 2022-07-13 14:02 PDT (History)
6 users (show)

See Also:

Attachments
Test (183 bytes, text/html)
2014-06-13 03:16 PDT, Ion Rosca 		no flags Details
Test with divs (1.37 KB, text/html)
2014-06-16 08:12 PDT, Ion Rosca 		no flags Details
Screenshot blending on body (353.43 KB, image/jpeg)
2014-06-16 08:14 PDT, Ion Rosca 		no flags Details
Test with body (216 bytes, text/html)
2014-06-16 08:22 PDT, Ion Rosca 		no flags Details
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Ion Rosca 2014-06-13 01:20:24 PDT 
Rendering defects when using background-blend-mode on a radial-gradient background image.

It looks like the initial backdrop for background blending is not initialized properly and blending is done on top of a layer with misc color information.

Other possible consequence of this bug is that when using multiple radial-gradient background layers, only the top layer will be visible.
http://codepen.io/adobe/full/8a939a42e4d0fd604790b676611a9006
Comment 1 Ion Rosca 2014-06-13 03:16:16 PDT 
Created attachment 233037 [details]
Test
Comment 2 Ion Rosca 2014-06-16 08:12:52 PDT 
Created attachment 233158 [details]
Test with divs
Comment 3 Ion Rosca 2014-06-16 08:14:29 PDT 
Created attachment 233159 [details]
Screenshot blending on body
Comment 4 Ion Rosca 2014-06-16 08:22:44 PDT 
Created attachment 233160 [details]
Test with body
Comment 5 Ion Rosca 2014-06-16 09:20:06 PDT 
I did a bit of investigation and it might be a CG issue. I'll describe the attached tests and what happens.

"Test with body"
* html: the body element has a background color (aqua), a radial-gradient image (a yellow oval) and background-blend-mode.
* result: the yellow oval drawn over a background being random content from other tabs (see "Screenshot blending on body")

"Test with divs"
* html: div elements have background color (aqua), radial-gradient image (yellow circle) and background-blend-mode.
* result: almost all divs (except those having normal and screen blend modes) contain a yellow circle on a white background.

Debugging:
* Everything up to CGContextDrawRadialGradient paints correctly (the aqua background color). 
* calling any CGContextFillRect function right before CGContextDrawRadialGradient will have no effect,  because the latter replaces everything on the viewport.
* calling CGContextFillRect with a red color right after CGContextDrawRadialGradient will draw the red rectangle, blending it correctly with the yellow gradient and other content in the viewport.

Exceptions:
* I could not reproduce "Test with body" on Safari 8, Mac OS 10.10, but "Test with divs" is still there.
* Screen blend mode works everywhere.
* Adding a css border on divs having background-blend-mode in the "Test with divs" file fixes the issue for this test case.
* It works correctly in minibrowser.
Comment 6 Simon Fraser (smfr) 2014-06-16 11:11:53 PDT 
Seems like a bug in Core Graphics accelerated drawing code.
Comment 7 Simon Fraser (smfr) 2014-06-16 11:13:57 PDT 
Does this only happen with gradients, or other background images too?
Comment 8 Ion Rosca 2014-06-16 12:13:41 PDT 
This happens only with *radial* gradients.
Comment 9 Ion Rosca 2014-09-18 06:23:24 PDT 
I still can see this bug on Safari 8. I reported it at bugreport.apple.com as Problem #18379644.
Comment 10 Brent Fulgham 2022-07-13 14:02:29 PDT 
These test cases appear to work properly in modern WebKit.