Bug 133842

Summary: [CSS Blending] Rendering defects when using background-blend-mode on a radial-gradient background image
Product: WebKit Reporter: Ion Rosca <rosca>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: bfulgham, cabanier, dino, mihnea, simon.fraser, WebkitBugTracker
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 108546    
Attachments:
Description Flags
Test
none
Test with divs
none
Screenshot blending on body
none
Test with body none

Ion Rosca
Reported 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
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 attachment proposed patch, testcase, etc.
Ion Rosca
Comment 1 2014-06-13 03:16:16 PDT
Created attachment 233037 [details] Test
Ion Rosca
Comment 2 2014-06-16 08:12:52 PDT
Created attachment 233158 [details] Test with divs
Ion Rosca
Comment 3 2014-06-16 08:14:29 PDT
Created attachment 233159 [details] Screenshot blending on body
Ion Rosca
Comment 4 2014-06-16 08:22:44 PDT
Created attachment 233160 [details] Test with body
Ion Rosca
Comment 5 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.
Simon Fraser (smfr)
Comment 6 2014-06-16 11:11:53 PDT
Seems like a bug in Core Graphics accelerated drawing code.
Simon Fraser (smfr)
Comment 7 2014-06-16 11:13:57 PDT
Does this only happen with gradients, or other background images too?
Ion Rosca
Comment 8 2014-06-16 12:13:41 PDT
This happens only with *radial* gradients.
Ion Rosca
Comment 9 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.
Brent Fulgham
Comment 10 2022-07-13 14:02:29 PDT
These test cases appear to work properly in modern WebKit.
Note You need to log in before you can comment on or make changes to this bug.