Really strange mistake of transition to shadow box

Question

so recently I came across a really strange mistake with the transition of the box shadows ...

When you hover over a div, the transition uses shadow (black, 5px spreads). When you leave the divs with the cursor, the box-shadow change is set to 0px again.

The strange thing is : when a div is displayed with positioning based on% (for example, left: 1%), the window shadow does not clear properly. Some remains of it are still visible - cf. red divs in JSFiddle.

It becomes more scary : the position and shape of the remaining window shadow vary. Something seems to be related to the width of the screen. In JSFiddle, just move the vertical resize panel and hover over 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>

- ?

PS: Chrome Opera. Firefox, ,

Answer 1

transform: translate3d(0,0,0); , , , ( )

JSFiddle