Chrome浏览器和Firefox中的CSS过滤器无法正常工作

Question

我想创建一个Chrome扩展程序，它为色盲测试执行一些过滤，并且想要使用css/svg过滤程序，但是过滤程序不会影响正文背景。

有什么建议吗？

链接到codepen（在铬试验）或参见下文截图： http://codepen.io/larsenwork/pen/oZvdzX/?editors=1100

html { 
 
\t filter: grayscale(100%); 
 
} 
 

 
body, div { 
 
\t background-color: cyan; 
 
} 
 

 

 

 
/* Codepen style (ignore) */ 
 
* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t min-height: 100vh; 
 
\t padding: calc(3vh + 3vw); 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t align-items: flex-start; 
 
\t font-family: sans-serif; 
 
\t font-weight: 700; 
 
\t font-size: calc(3vh + 3vw); 
 
\t line-height: 1.3; 
 
} 
 

 
div { 
 
\t margin: 0 calc(-.5vh - .5vw); 
 
\t padding: 0 calc(.5vh + .5vw); 
 
} 
 

 
small { 
 
\t font-size: .6em; 
 
\t margin-top: 2em; 
 
} 
 

 
pre { 
 
\t font-weight: normal; 
 
}

In Chrome: Why is the body bg not gray 
 
<div>When this is?</div> 
 

 

 

 

 

 
<small>Same result (i.e. not applied to body) with e.g. <pre>filter: hue-rotate(90deg);</pre>or<pre>filter: url("#grayscale");</pre></small> 
 

 
<!-- Used for alt filter test --> 
 
<svg version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>

铬+火狐：

Safari中：

Answer 1

于是我找到了解决方案（不满意的话），但设置背景属性一样的HTML background-color: magenta;或background-image: url("");修复该问题在Chrome和Firefox

链接到工作版本： http://codepen.io/larsenwork/pen/mWbjJY?editors=1100

html { 
    filter: grayscale(100%); 
    background-color: magenta; 
} 

body, div { 
    background-color: cyan; 
}