Bug 58980 – box-shadow glitch on hover with -webkit-transition

• Component: CSS
• Status: RESOLVED DUPLICATE

[Husar]

If you have an HTML element with multiple box-shadows that should get a change in the box-shadow values after a hover with -webkit-transition there is a noticeable glitch in the shadows rendering.  

Tho replicate:
Create an element (<div>) with the following styles:

div {
	width:220px;
        background-color:#DDD;
	border:1px solid #857A6D;
	border-left:1px solid #C5BEB8;
	border-top:1px solid #C5BEB8;
	padding:30px 30px 60px;
	border-radius:8px;
-webkit-transition: all .4s ease-in-out;	
}

.boxshadow #section-one address {
	
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	-webkit-box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
		inset 0 3px 15px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
		inset 0 3px 15px rgba(0, 0, 0, 0.1); 
	box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
		inset 0 3px 15px rgba(0, 0, 0, 0.1); 
}

.boxshadow #section-one address:hover {
	/*-webkit-box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
		inset 0 3px 15px rgba(0, 0, 0, 0.1),
		4px 4px 6px rgba(166, 153, 140, 0.7), 
		-3px -3px 6px rgba(166, 153, 140, 0.7);*/
	-moz-box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
		inset 0 3px 15px rgba(0, 0, 0, 0.1),
		4px 4px 6px rgba(166, 153, 140, 0.7), 
		-3px -3px 6px rgba(166, 153, 140, 0.7);
	/*box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
		inset 0 3px 15px rgba(0, 0, 0, 0.1),
		4px 4px 6px rgba(166, 153, 140, 0.5), 
		-2px -2px 6px rgba(166, 153, 140, 0.5);*/
}

[Husar]

*** This bug has been marked as a duplicate of bug 58982 ***