mix-blend-mode not working on SVGs
Reported by
kamil.wy...@uxpin.com,
Jun 8 2018
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36 Example URL: https://jsfiddle.net/Nippon/qkdhbr7c/ Steps to reproduce the problem: 1. Add mix-blend-mode with any value to SVG content What is the expected behavior? I.e. for the "luminosity" and white background - svg file should be rendered as black&white. What went wrong? Mix-blend-mode is not working Does it occur on multiple sites: N/A Is it a problem with a plugin? N/A Did this work before? Yes 66 Does this work in other browsers? Yes Chrome version: 67.0.3396.79 Channel: stable OS Version: OS X 10.13.1 Flash Version:
,
Jun 8 2018
Firefox does what we do. Is this a spec issue?
,
Jun 8 2018
I'd suspect this to be something with the "document canvas" and how that interacts with things on top of it. FTR, my FF Nightly renders differently to my trunk Content Shell, so I'm definitely seeing the issue described.
,
Jun 8 2018
I can actually repro this on Linux. The bisect points waaay back (M57ish): You are probably looking for a change made after 438282 (known good), but no later than 438302 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/e8d3e064a6010ee79aca71eb8dea18096fc7822c..66e4177886b272950cafc7dabed256025dcf7013 Looks like https://chromium.googlesource.com/chromium/src/+/cf97fd35cae7ca6fae58cff6eea2f6cc59716171.
,
Jun 8 2018
Working as spec'd. If this "works" in other browser, bugs shall be filed against other browsers. The SVG image blends onto a transparent backdrop created by the root stacking context, then the root stacking context paints on top of the white document background. Note that the white background on <body> element isn't really used by <body> thus not paint into the root stacking context, due to a infamous CSS quirk known as background stealing: https://www.w3.org/TR/css-backgrounds-3/#special-backgrounds To achieve the intended behavior (i.e. SVG blends onto a white backdrop), the white background must paint into the root stacking context. This can be done by specifying a white background on some element other than <html> and <body>, or set the background of both <html> and <body> to white. |
||||
►
Sign in to add a comment |
||||
Comment 1 by dtapu...@chromium.org
, Jun 8 2018