Bug 114303 - feColorMatrix filter renders poorly via CSS
Summary: feColorMatrix filter renders poorly via CSS
Status: NEW
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 treegraph
 
Reported: 2013-04-09 12:46 PDT by Mike Sierra
Modified: 2018-01-25 16:48 PST (History)
5 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

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.