WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Details
same color matrix filter viewed from within SVG file
(1.18 MB, image/png)
2013-04-09 12:47 PDT
,
Mike Sierra
no flags
Details
Same feColorMatrix applied via SVG or CSS, different results
(713 bytes, text/html)
2013-06-15 03:43 PDT
,
Pierre
no flags
Details
Same feColorMatrix applied via SVG or CSS, different results
(731 bytes, text/html)
2013-06-15 03:57 PDT
,
Pierre
no flags
Details
Show Obsolete
(1)
View All
Add attachment
proposed patch, testcase, etc.
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.
Top of Page
Format For Printing
XML
Clone This Bug