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)














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.

6
задан BoltClock 28 July 2012 в 18:17
поделиться