Really weird box-shadow transition bug

Question

so recently I stumbled upon a really weird bug with transitioning a box-shadow...

When hovering over the divs, a box-shadow (black, 5px spread) is applied with a transition. When leaving the divs with the cursor, the box-shadow spread is again set to 0px.

The weird thing: when the div is displayed with a %-based positioning (e.g. left: 1%), the box-shadow is not cleared up properly. Some remnants of it are still visible - cf. red divs in JSFiddle.

It gets weirder: the position and shape of the leftover box-shadow varies. It seems to be somehow related to the screen width. In the JSFiddle, just move the vertical resize bar and hover again...

JSFiddle

CSS

.a, .b, .c, .d {
    margin: 5px;
    width: 100px;
    height: 100px;
    transition: box-shadow 0.2s linear;
    box-shadow: 0 0 0 0 black;
    position: relative;
}
.a, .b {
    background-color: #6c6;
}
.c, .d {
    background-color: #c66;
}
.b {
    left: 50px;
}
.c {
    left: 1%;
}
.d {
    left: 2%;
}
.a:hover, .b:hover, .c:hover, .d:hover {
    box-shadow: 0 0 0 5px black;
}

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

Am I missing something here or is this a bug?

PS: This behavior is present in Chrome and Opera. Firefox does not seem to have this bug

Answer 1

By adding transform: translate3d(0,0,0); to the element, the bug seems to disappear (this is called null transform hack)

Fork on JSFiddle