Bug 114303 - feColorMatrix filter renders poorly via CSS
Summary: feColorMatrix filter renders poorly via CSS
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Simon Fraser (smfr)
URL: http://letmespellitoutforyou.com/samp...
Keywords:
Depends on:
Blocks: 68469
  Show dependency tree / graph
 
Reported: 2013-04-09 12:46 PDT by Mike Sierra
Modified: 2022-07-13 14:33 PDT (History)
6 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Mike Sierra 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.
Comment 1 Mike Sierra 2013-04-09 12:47:26 PDT 
Created attachment 197162 [details]
same color matrix filter viewed from within SVG file
Comment 2 Pierre 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.
Comment 3 Pierre 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!
Comment 4 Pierre 2013-06-15 04:04:44 PDT 
I'm not using Nightly.
I'm Chromium Version 27.0.1453.110 on Ubuntu 12.04
Comment 5 Lutz 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;
Comment 6 Lutz 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;
Comment 7 Simon Fraser (smfr) 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.
Comment 8 Brent Fulgham 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.