Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webkit choking on rendering multiple text-shadow & box-shadow values with webkit-transition

CSS3 -webkit-transition is choking on multiple box-shadow values and text-shadow values. (Chrome & Safari)

More specifically, I have two scenarios...

  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?)

05/09/2011 UPDATE: The bug has been reported to Webkit (see Husar's comment below). Also, I see that recent builds of Chrome (specifically my current 10.0.648.205 version) is rendering a smoothe transition now, effectively eliminating the bug. Safari however (version 5.0.5 (6533.21.1)) still displays the buggy rendering.

like image 918
Joel Glovier Avatar asked Oct 15 '10 14:10

Joel Glovier


1 Answers

Apparently this is just a bug with webkit rendering, and there is no apparent fix.

like image 164
Joel Glovier Avatar answered Oct 18 '22 05:10

Joel Glovier