XMLNS W3 URL for SVG spec now throwing error in Ch

问题:

I used this SVG mask for grayscale in browsers where filter: grayscale(100%) doesn't work:

filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

A little while back, this worked perfectly fine, but now I get this error in console:

Unsafe attempt to load URL data:image/svg+xml;utf8,http://www.w3.org/2000/svg' height='0'>#greyscale from frame with URL [my domain here]. Domains, protocols and ports must match.

Needless to say, the grayscale filter no longer works.

1. Can you explain what is going wrong?
2. Can this be fixed so that same CSS code is used, no error is thrown, and the filter works?
3. Considering it mentions same domain and protocol, though I don't know how to implement the solution as I don't understand the problem, I am able to put and link files on the same domain/subdomain with same protocol, instead of using external URL.

UPDATE:

User @Potherca commented:

...worked in Chrome 52, broke in Chrome 53...

This is also my experience. The SVG mask doesn't work in current version of Chrome (Chrome Version 53.0.2785.116) but it worked in previous version. It does still work in Firefox and Safari.

UPDATE 2: I tried it with https like ...xmlns='http://www.w3.org/2000/svg'... but error / bug persists.

UPDATE 3: As user @Potherca suggested, moving the SVG filter line to the top of the list of cross-browser filter rules eliminates the bug. NOTE: this is a workaround, but the main bug still exists in Chrome/Safari/webkit, but not in other browsers/kits at the time of this update.

回答1:

I had a similar issues. For cross-browser support several filter lines were added in the CSS.

It seemed to be caused by the SVG filter being the last in line. By moving it up before other filter lines Chrome used another filter and the error disapeared.

.gray-out {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg>...</svg>");/* Move this line up */
}

回答2:

This issue was occurring for me on Chrome Version 59.0.3071.115 (Official Build) (64-bit)

It is working after I made the change based on previous answer

@media only screen and (min-width: 820px) {
            .brand-slider img {
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);

                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

             transition: all 1000ms ease 0s;
            }
        }

Changed code is

@media only screen and (min-width: 820px) {
        .brand-slider img {

            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
         transition: all 1000ms ease 0s;
        }
    }

回答3:

This might help someone who's not using an SVG filter but is still receiving a similar error message.

Unsafe attempt to load URL data:image/svg+xml;utf8...

I'm guessing that least Chrome and Firefox are using SVG filters under the hood even when you have defined just CSS filter rule.

So in my case problem was a filter under incorrectly formatted CSS nesting selector which happened because I was switching from SASS style nesting to CSS spec style nesting. The spec requires you to start each nested selector with &.