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.
Created attachment 233037 [details]
Created attachment 233158 [details]
Test with divs
Created attachment 233159 [details]
Screenshot blending on body
Created attachment 233160 [details]
Test with body
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.
* 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.
* 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.
Seems like a bug in Core Graphics accelerated drawing code.
Does this only happen with gradients, or other background images too?
This happens only with *radial* gradients.
I still can see this bug on Safari 8. I reported it at bugreport.apple.com as Problem #18379644.