Why does applying a CSS filter block the containing link? Can I get around this?

Question

I tried to create a minimal fragment demonstrating the situation. The following HTML / CSS creates two fields: one red and one blue. Each of them contains a clickable link. When I apply a CSS filter (as I did to create cyan), the window will no longer be clickable. My best guess is that this is related to "stacking contexts," but I admit that I don't know enough about them.

In the second part of the question, while working on this, is it possible to somehow change the CSS for the class filteredto avoid this problem? I come across this in the context of the Chrome extension, which applies CSS filters to images, so I would like the solution to not require changing the basic structure of the site (HTML) or significantly changing the way the site is displayed. I would find this especially useful if there was a solution that could be applied programmatically without introducing the risk that other sites would behave incorrectly.

.filtered {
  filter: invert(100%);
}

/* I cannot modify any of the following CSS to solve this. */

div, a {
  display: block;
  height: 50px; width: 50px;
  left: 0; top: 0;
  position: absolute;
}

.outer:before {
    display: block;
    height: 50px; width: 50px;
    left: 0px; top: 0;
    position: absolute;
    content: '';
    z-index: 2;
}

.inner {
    background: red;
}

.link {
    z-index: 2;
}

<div style="position: relative">
  <div class="outer">
    <div class="inner">
      <a href="http://example.com" class="link"></a>
    </div>
  </div>
</div>
<div style="position: relative">
  <div class="outer">
    <div class="inner filtered">
      <a href="http://example.com" class="link"></a>
    </div>
  </div>
</div>

Run codeHide result

Answer 1

You should set the z-indexelement .filteredhigher than the z-indexpseudo-class :before:

.filtered {
  filter: invert();
  z-index: 10;
}

.filtered {
  filter: invert();
  z-index: 10;
}

/* I cannot modify any of the following CSS to solve this. */

div, a {
  display: block;
  height: 50px; width: 50px;
  left: 0; right; 0; top: 0; bottom: 0;
  position: absolute;
}

.outer:before {
    display: block;
    height: 50px; width: 50px;
    left: 0px; right: 0px; top: 0; bottom: 0;
    position: absolute;
    content: '';
    z-index: 2;
}

.inner {
    background: red;
}

.link {
    z-index: 2;
}

<div class="outer">
  <div class="inner filtered">
    <a href="http://example.com" class="link"></a>
  </div>
</div>

Run codeHide result