RESOLVED CONFIGURATION CHANGED 114303
feColorMatrix filter renders poorly via CSS
https://bugs.webkit.org/show_bug.cgi?id=114303
Summary feColorMatrix filter renders poorly via CSS
Mike Sierra
Reported 2013-04-09 12:46:20 PDT
Created attachment 197161 [details] a color matrix filter, as it appears via CSS filter:url(file.svg#filterID) * Go to URL * choose the "filter_cmx.svg#dusk" option. * Compare with this page: http://letmespellitoutforyou.com/samples/svg/filter_cmx.svg The reference the same "dusk" filter. Via CSS it appears with only red values. Viewed directly in SVG it appears with more green and blue.
Attachments
a color matrix filter, as it appears via CSS filter:url(file.svg#filterID) (672.54 KB, image/png)
2013-04-09 12:46 PDT, Mike Sierra
no flags
same color matrix filter viewed from within SVG file (1.18 MB, image/png)
2013-04-09 12:47 PDT, Mike Sierra
no flags
Same feColorMatrix applied via SVG or CSS, different results (713 bytes, text/html)
2013-06-15 03:43 PDT, Pierre
no flags
Same feColorMatrix applied via SVG or CSS, different results (731 bytes, text/html)
2013-06-15 03:57 PDT, Pierre
no flags
Mike Sierra
Comment 1 2013-04-09 12:47:26 PDT
Created attachment 197162 [details] same color matrix filter viewed from within SVG file
Pierre
Comment 2 2013-06-15 03:43:31 PDT
Created attachment 204765 [details] Same feColorMatrix applied via SVG or CSS, different results Filter of the SEPIA kind, very simple. Watch the differences. SVG is correct.
Pierre
Comment 3 2013-06-15 03:57:10 PDT
Created attachment 204766 [details] Same feColorMatrix applied via SVG or CSS, different results Filter of the SEPIA kind, very simple. Watch the differences. SVG is correct. Also, you can view this attachment on Moz/Firefox. They do it the right way!
Pierre
Comment 4 2013-06-15 04:04:44 PDT
I'm not using Nightly. I'm Chromium Version 27.0.1453.110 on Ubuntu 12.04
Lutz
Comment 5 2014-09-26 07:21:40 PDT
(In reply to comment #3) > Created an attachment (id=204766) [details] > Same feColorMatrix applied via SVG or CSS, different results > > Filter of the SEPIA kind, very simple. > Watch the differences. SVG is correct. > > Also, you can view this attachment on Moz/Firefox. > They do it the right way! It helps when "color-interpolation" and "color-interpolation-filters" is not set auto(-matic), it must set to the same value "sRGB" (or otherwise both to same value "linearRGB"). Possible values for svg-attribute "color-interpolation" and "color-interpolation-filters": auto | sRGB | linearRGB | inherit - Example1: <svg><def><filter color-interpolation="sRGB" color-interpolation-filters="sRGB">....</filter></def></svg> - Example2: <svg color-interpolation="sRGB" color-interpolation-filters="sRGB"><def><filter>....</filter></def></svg> Possible values for css-style "color-interpolation" and "color-interpolation-filters": auto | srgb | linearrgb | inherit Example: <style> * { color-interpolation: srgb; color-interpolation-filters: srgb; } </style> Maybe Definition shows something like this, before both parameters set to same value. ----- HTML/SVG-Element ------- color-interpolation: srgb; color-interpolation-filters: linearrgb; ----- HTML/SVG/filter-Element ------- color-interpolation: srgb; color-interpolation-filters: linearrgb; ----- HTML/SVG/image-Element ------- color-interpolation: srgb; color-interpolation-filters: linearrgb; ----- HTML/img-Element ------- color-interpolation: srgb; color-interpolation-filters: linearrgb;
Lutz
Comment 6 2014-09-26 07:23:57 PDT
(In reply to comment #3) > Created an attachment (id=204766) [details] > Same feColorMatrix applied via SVG or CSS, different results > > Filter of the SEPIA kind, very simple. > Watch the differences. SVG is correct. > > Also, you can view this attachment on Moz/Firefox. > They do it the right way! It helps when "color-interpolation" and "color-interpolation-filters" is not set auto(-matic), it must set to the same value "sRGB" (or otherwise both to same value "linearRGB"). Possible values for svg-attribute "color-interpolation" and "color-interpolation-filters": auto | sRGB | linearRGB | inherit - Example1: <svg><def><filter color-interpolation="sRGB" color-interpolation-filters="sRGB">....</filter></def></svg> - Example2: <svg color-interpolation="sRGB" color-interpolation-filters="sRGB"><def><filter>....</filter></def></svg> Possible values for css-style "color-interpolation" and "color-interpolation-filters": auto | srgb | linearrgb | inherit Example: <style> * { color-interpolation: srgb; color-interpolation-filters: srgb; } </style> Maybe Definition shows something like this, before both parameters set to same value. ----- HTML/SVG-Element ------- color-interpolation: srgb; color-interpolation-filters: linearrgb; ----- HTML/SVG/filter-Element ------- color-interpolation: srgb; color-interpolation-filters: linearrgb; ----- HTML/SVG/image-Element ------- color-interpolation: srgb; color-interpolation-filters: linearrgb; ----- HTML/img-Element ------- color-interpolation: srgb; color-interpolation-filters: linearrgb;
Simon Fraser (smfr)
Comment 7 2018-01-25 16:48:00 PST
None of the filters on http://letmespellitoutforyou.com/samples/svg_inlineFilters.html render in Safari. This is probably related to bug 180565 and related.
Brent Fulgham
Comment 8 2022-07-13 14:33:54 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.
Note You need to log in before you can comment on or make changes to this bug.