Recently, I encountered an unusual issue involving transitioning a box-shadow...
Upon hovering over the divs, a box-shadow (black, 5px spread) is applied with a transition. Once the cursor leaves the divs, the box-shadow spread returns to 0px.
The strange part: when the div is displayed with a percentage-based positioning (e.g. left: 1%), the box-shadow does not clear properly. Some remnants remain visible - see red divs in the JSFiddle link.
It gets even weirder: the leftover box-shadow's position and shape vary. It appears to be somehow linked to the screen width. Just resize the browser window in the JSFiddle link and hover again...
Here's the JSFiddle for reference
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>
Is there something I'm overlooking here or is this possibly a bug?
PS: This behavior seems to occur in Chrome and Opera, but Firefox does not exhibit this issue.