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 Rendering | Assignee: | 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
Ion Rosca
2014-06-13 01:20:24 PDT
Created attachment 233037 [details]
Test
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. 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. 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. These test cases appear to work properly in modern WebKit. |