Why Does Stacking Order Change on Webkit Filter Hover

Why does stacking order change on webkit filter hover?

This is because a value other than none establishes a stacking context. This is documented in the spec (which is currently in Working Draft status):

2 Module interactions

This specification defines a set of CSS properties that affect the
visual rendering of elements to which those properties are applied;
these effects are applied after elements have been sized and
positioned according to the Visual formatting model from [CSS21]. Some
values of these properties result in the creation of a containing
block, and/or the creation of a stacking context.

Also the spec states:

5 Graphic filters: the filter property

A computed value of other than none results in the creation of a
stacking context [CSS21] the same way that CSS opacity does.

Image moves on hover when changing filter in chrome

This is a confirmed Chrome bug that popped up in a recent update, and should hopefully get resolved soon.

Here's a reduced test case: https://codepen.io/chasebank/pen/KZgYXK

Here's the Chromium issue marked for triage.

I think the best thing to do for now is nothing. Wait for a proper fix to be implemented. It's never a good idea to hack around an acknowledge browser bug.

We can take some comfort in the fact that the only other people seeing this are Chrome users who recently updated. My first try was asking a Slack channel full of skilled devs, and even they weren't seeing it.

$('#toggleBlur').click(function() {  $('#content').toggleClass('blur')})

body {  padding: 5%;}
div {  filter: blur(0px);}
.blur {  filter: blur(.1px)}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="toggleBlur">Toggle blur</button>
<div id="content">  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium eum nisi voluptate eaque! Sequi sit nemo iste. Earum accusantium rerum consectetur cumque sequi maiores maxime reiciendis, alias beatae accusamus labore.</p>  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate enim magnam nemo atque, ad placeat ab unde consequatur minima velit, ipsam tempora laudantium molestias sapiente perspiciatis quaerat modi ratione voluptatem?</p>  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti commodi cum sed nemo fugiat non esse ex quos consectetur ipsam alias laboriosam, cumque eaque omnis quae accusamus, repellat dolore modi!</p></div>

.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>

.artist-tile {
  width: 300px;
  max-width: 100%;
  text-align: center;
  background: #f2f2f2;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.link-artist {
  width: 100%;
}
.art {
  width: 100%;
}
.link-artist:hover ~ .art{
       filter: brightness(60%);
 }

<div class="artist-tile">
 <p class="link-artist">Ed Sheeran</p>
 <img class="art" src="https://preview.ibb.co/cyESoU/img1.jpg" alt="Sample Image" >
</div>