CSS3 -webkit-transition s'étouffe sur plusieurs valeurs box-shadow et des valeurs shadow-texte. (Chrome & Safari)Webkit s'étouffant lors du rendu de plusieurs valeurs text-shadow et box-shadow avec la transition webkit
Plus précisément, j'ai deux scénarios ...
je le texte a un titre de document qui a trois textes-ombres (pour l'apparence de profondeur). J'utilise également la règle -webkit-transition pour changer la couleur de l'ombre du texte sur le vol stationnaire afin qu'il semble briller en vol stationnaire.
J'ai des liens sur lesquels j'utilise la règle box-shadow de la même manière que ci-dessus, avec trois valeurs pour l'effet de profondeur. Utilisant également -webkit-transition ici pour changer la couleur des boutons et du texte pour un effet de survol.
Le problème: Pour les deux cas ci-dessus, en planant au-dessus des éléments WebKit semble rendre la transition comme un à la fois, de sorte que les valeurs ne pas tous se fondre dans leurs nouvelles valeurs simultanément. Au lieu de cela, ils apparaissent comme chacun est rendu - l'un après l'autre, et c'est une transition très gênante comme vous le verrez.
J'ai plusieurs cas, et voici des liens vers certains d'entre eux: (assurez-vous de voir dans Chrome ou Safari)
transition -Text-ombre sur: hover pour la page h1 («don de GUÉRISON » texte): http://cure.org/goh
transition -Box-ombre sur: vol stationnaire pour le 1er appel diaporama à l'action ("bouton Read More"): http://cure.org
transition -Box-ombre sur: hover pour les liens bas de page de nav (À propos, Rods, etc): http://tuscaroratackle.com
Enfin, voici un exemple du code que j'utilise: () Pas de n'importe quel site, juste un exemple que j'ai construit pour cette question; voir vivre ici: 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>
La question ici est vraiment est-il un moyen d'éviter que le rendu a ordonné, comme l'utilisation syntaxe différente dans mon CSS? (comme un ordre spécifique des multiples valeurs box-shadow, ou en utilisant plusieurs déclarations box-shadow au lieu de les ajouter toutes en une seule règle?)
05/09/2011 MISE À JOUR: Le bogue a été signalé à Webkit (voir le commentaire de Husar ci-dessous). En outre, je vois que les versions récentes de Chrome (en particulier ma version actuelle 10.0.648.205) est en train de rendre une transition en douceur maintenant, ce qui élimine efficacement le bug. Safari cependant (version 5.0.5 (6533.21.1)) affiche toujours le rendu bogué.
Je suis intéressé à connaître ce qu'il ya des développements de cette question comme je l'ai récemment courir dans aussi bien? – Maverick
Pas que j'ai entendu - bien que je n'ai pas suivi le blog de webkit ou quoi que ce soit ces derniers temps. De plus, je n'ai pas vraiment cherché où signaler des bugs comme celui-ci, donc je devrais probablement faire un peu de temps ... –
J'ai signalé cela comme un bug sur Bugzilla webkit => https://bugs.webkit.org/show_bug .cgi? id = 58982 mais je n'ai toujours pas reçu de commentaires dessus – Maverick