Я хочу создать расширение chrome, которое выполняет некоторую фильтрацию для тестирования цветовой слепоты и хочет использовать фильтры css/svg, но имеет проблему с фильтрами, не затрагивающими фон тела.Фильтр CSS не работает на корпусе в Chrome и Firefox
Любые предложения?
Ссылка на 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>
ПРИЗНАВАЕМЫХ ошибка, еще не исправлена: [фильтр не меняет цвет фона тела, если только 'фон' не указан в' html'] (https://crbug.com/591015) – wOxxOm
@wOxxOm ах, приветствия - спасибо –