'Why is -webkit-filter not working for nested elements?

There seems to be an issue with turning off -webkit-filter in chrome.

It also doesn't seem to work how I would expect in firefox 34.0.5, or firefox 35 for that matter, when using the non-browser-specific filter css property.

Apparently, the property should be available, according to caniuse.

Given the following code snippet (or here on CodePen):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style>
    #outer {
      background: blue;
      -webkit-filter: grayscale(100%);
    }

    #outer #inner {
      background: green;
      -webkit-filter: none; 
    }
  </style>
</head>
<body>
  <div id="outer">
    outer
    <div id="inner">inner</div>
  </div>
</body>
</html>

Bottom line, why isn't div#inner getting its filter turned off?

css


Solution 1:[1]

I think you're misunderstanding how filter works: the filter isn't inherited like other CSS properties, it's just applied once to the div's rendered contents. So your inner div gets no filter applied, then your outer div, which contains your inner div, has the filter applied to it.

filter is a compositing operation: the content of the outer box is rendered, then the filter is applied. You can't "turn off" a filter on the inner box because it's not applied at that level.

Think of it like picture-in-picture: you have your outer image, you paste on your inner image, then you take the resulting image and apply a the grayscale effect. That's essentially what the browser is doing here.

Basically, it works like this:

Visual diagram of compositing process for inner/outer

If you want it to work, you could make your inner div be on a completely separate layer. That is, make your "outer" div into a lower layer div and make your "inner" div into a higher layer div drawn above/in front of the lower layer div, rather than being contained within it:

Visual diagram of compositing process for higher/lower

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions