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.
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.
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 */
}
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With