CSS3 -webkit-transition is choking on multiple box-shadow values and text-shadow values. (Chrome & Safari)
More specifically, I have two screnarios...
(1) I have text has a document heading that has three text-shadows (for appearance of depth). I am also using the -webkit-transition rule to change the color of the text-shadow on hover so that it appears to glow on hover.
(2) I have links which I'm using the box-shadow rule on in the same way as above, with three values for depth effect. Also using -webkit-transition here to change the color of the buttons and text for a hover effect.
The Problem: For both instances above, when hovering over the elements webkit appears to render the transition as one at a time, so the values don't all fade into their new values simultaneously. Instead, they appear as each one is rendered - one after the other, and it is a very awkward transition as you'll see.
I have several instances, and here are links to some of them: (make sure to view in Chrome or Safari)
-Text-shadow transition on :hover for page h1 ("GIFT of HEALING" text): http://cure.org/goh
-Box-shadow transition on :hover for 1st slide call to action ("Read More" button): http://cure.org
-Box-shadow transition on :hover for footer nav links (About, Rods, etc): http://tuscaroratackle.com
Finally, here's a sample of the code I'm using: (Not from any site, just an example I built for this question; see it live here: http://joelglovier.com/test/webkit-shadow-transition-bug.html)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul {
overflow:hidden;
width:500px;
height:auto;
margin:50px 100px;
background:rgba(0,0,0,.4);
border:1px solid rgba(0,0,0,1);
-webkit-border-radius:10px;
-webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
-webkit-transition:all .5s ease;
}
ul:hover {
-webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
display:inline-block;
}
a:link,a:visited {
float:left;
display:block;
padding:6px 10px;
margin:10px 20px;
font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
text-decoration:none;
color:#000;
background:#92d400;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
-webkit-transition:all .5s ease;
}
a:hover,a:focus {
background:#198c45;
-webkit-box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff;
}
a:active {
position:relative;
top:1px
}
</style>
</head>
<body>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</body>
</html>
So the question here really is is there any way to prevent that ordered rendering, such as using different syntax in my CSS? (such as a specific order of the multiple box-shadow values, or using multiple box-shadow declarations instead of adding them all into one rule?)