58980 2011-04-20 05:37:08 -0700 box-shadow glitch on hover with -webkit-transition 2011-04-20 05:43:19 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC Windows 7 RESOLVED DUPLICATE 58982 P2 Normal --- 0 enfantsauvage webkit-unassigned oldest_to_newest 389156 0 enfantsauvage 2011-04-20 05:37:08 -0700 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);*/ } 389160 1 enfantsauvage 2011-04-20 05:43:19 -0700 *** This bug has been marked as a duplicate of bug 58982 ***