3

I want to create a chrome extension that does some filtering for color blindness testing and wanted to use css/svg filters but have a problem with filters not affecting body background.

Any suggestions?

Link to codepen (test in Chrome) or see screenshots below: http://codepen.io/larsenwork/pen/oZvdzX/?editors=1100

html {
 filter: grayscale(100%);
}

body, div {
 background-color: cyan;
}



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

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

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

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

pre {
 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: Chrome Screenshot

Safari: Safari Screenshot

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
Andreas Larsen
  • 101
  • 3
  • 10

1 Answers1

2

So I found a solution (not happy with it) but setting a background property like background-color: magenta; or background-image: url(""); on the html fixes the issue in chrome and Firefox

Link to working version: http://codepen.io/larsenwork/pen/mWbjJY?editors=1100

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

body, div {
    background-color: cyan;
}
Andreas Larsen
  • 101
  • 3
  • 10