Фильтр CSS не работает на корпусе в Chrome и Firefox

Question

Я хочу создать расширение chrome, которое выполняет некоторую фильтрацию для тестирования цветовой слепоты и хочет использовать фильтры css/svg, но имеет проблему с фильтрами, не затрагивающими фон тела.

Любые предложения?

Ссылка на codepen (тест в Chrome) или увидеть скриншоты ниже: 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>

Chrome + Firefox:

Safari:

Answer 1

Таким образом, я нашел решение (не счастлива с ним), но установка фонового свойства как background-color: magenta; или background-image: url(""); на HTML устраняет проблему в хроме и Firefox

Ссылка на рабочую версию: http://codepen.io/larsenwork/pen/mWbjJY?editors=1100

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

body, div { 
    background-color: cyan; 
}