CSS3 -webkit-transition se está ahogando en múltiples valores de sombra de cuadro y valores de sombra de texto. (Chrome & Safari)Webkit asfixia al renderizar múltiples valores de sombra de texto y sombreado de caja con webkit-transition
Más específicamente, tengo dos escenarios ...
tengo texto tiene un encabezado de documento que tiene tres sombras de texto (por apariencia de profundidad). También estoy usando la regla -webkit-transition para cambiar el color de la sombra de texto en el vuelo estacionario, de modo que parezca brillar con el vuelo estacionario.
Tengo enlaces en los que estoy usando la regla de sombreado de caja de la misma manera que la anterior, con tres valores para el efecto de profundidad. También utiliza -webkit-transition aquí para cambiar el color de los botones y el texto para un efecto de desplazamiento.
El problema: Para ambos casos anteriores, cuando se cierne sobre la webkit elementos aparece para hacer la transición como uno a la vez, por lo que los valores no todos se desvanecen en sus nuevos valores simultáneamente. En cambio, aparecen a medida que se renderizan, uno tras otro, y es una transición muy incómoda como verán.
Tengo varios casos, y aquí están los enlaces a algunos de ellos: (asegúrese de ver en Chrome o Safari)
transición -Text-sombra en: activable por página h1 ("regalo de CURACIÓN" texto): http://cure.org/goh
-Box-sombra transición en: flotar durante la llamada primera diapositiva a la acción ("Leer Más botón"): http://cure.org
transición de sombra en -Box: hover para los enlaces de navegación de pie de página (Acerca de, Varillas, etc.): http://tuscaroratackle.com
Finalmente, aquí hay una muestra del código que estoy usando: () No desde ningún sitio, solo un ejemplo que construí para esta pregunta; ver en vivo aquí: 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>
Así que la pregunta aquí realmente es ¿hay alguna manera de prevenir que ordenó la representación, como el uso de la sintaxis diferente en mi CSS? (Como por ejemplo un orden específico de los múltiples valores de caja de sombra, o el uso de múltiples declaraciones box-shadow en lugar de añadir a todos en una regla?)
05/09/2011 ACTUALIZACIÓN: El error se ha informado a Webkit (ver el comentario de Husar a continuación). Además, veo que las compilaciones recientes de Chrome (específicamente mi actual versión 10.0.648.205) están haciendo una transición suave ahora, eliminando de manera efectiva el error. Sin embargo, Safari (versión 5.0.5 (6533.21.1)) aún muestra la representación con errores.
Estoy interesado en saber ¿hay desarrollos para este problema ya que recientemente se han topado con él también? – Maverick
No es que lo haya escuchado, aunque no he seguido el blog de webkit ni nada últimamente. Además, no he buscado realmente dónde reportar errores como este, así que probablemente debería hacerlo algún tiempo ... –
Lo he reportado como un error en Bugzilla => https://bugs.webkit.org/show_bug de webkit .cgi? id = 58982 pero todavía no he recibido ningún comentario al respecto – Maverick