La transizione CSS3 -webkit sta soffocando su più valori box-shadow e valori text-shadow. (Chrome & Safari)Webkit soffocamento sul rendering di più valori text-shadow e box-shadow con transizione a Webkit
Più in particolare, ho due scenari ...
ho testo ha un titolo documento che ha tre di testo ombre (per effetto di profondità). Sto anche usando la regola di transizione -webkit per cambiare il colore dell'ombra di testo su hover in modo che appaia a luce stazionaria.
Ho collegamenti a cui sto usando la regola box-shadow allo stesso modo di sopra, con tre valori per l'effetto profondità. Anche usando -webkit-transition qui per cambiare il colore dei pulsanti e del testo per un effetto hover.
Il problema: Per entrambi i casi di cui sopra, quando si passa sopra l'elementi webkit sembra rendere la transizione come uno alla volta, in modo che i valori non tutti dissolvenza nei loro nuovi valori contemporaneamente. Invece, appaiono come ciascuno è reso - uno dopo l'altro, ed è una transizione molto imbarazzante come vedrai.
Ho diversi casi, e qui ci sono i link ad alcuni di loro: (fare in modo di visualizzare in Chrome o Safari)
-Testo-ombra transizione sulla: hover per la pagina di h1 ("dono di GUARIGIONE" text): http://cure.org/goh
-Box-ombra transizione sulla: hover per il 1 ° chiamata a slitta per azione ("Read pulsante Altro"): http://cure.org
-Box-ombra transizione sulla: hover per i collegamenti footer nav (Informazioni, aste, ecc.): http://tuscaroratackle.com
Infine, ecco un esempio del codice che sto utilizzando: (Non da qualsiasi sito, solo un esempio che ho creato per questa domanda; vederla dal vivo qui: 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>
Quindi la domanda qui è in realtà non v'è alcun modo per impedire che ha ordinato di rendering, come ad esempio utilizzando la sintassi diversa nel mio CSS? (come un ordine specifico dei molteplici valori di box-shadow, o più dichiarazioni box-shadow invece di aggiungerli tutti in una regola?)
05/09/2011 AGGIORNAMENTO: il bug è stato segnalato a Webkit (vedere il commento di Husar qui sotto). Inoltre, vedo che le recenti versioni di Chrome (in particolare la mia attuale versione 10.0.648.205) stanno ora rendendo più omogenea la transizione, eliminando efficacemente il bug. Tuttavia Safari (versione 5.0.5 (6533.21.1)) mostra ancora il rendering buggato.
Sono interessato a sapere che ci sono sviluppi per questo problema come ho di recente eseguito in esso pure? – Maverick
Non che io abbia sentito, anche se ultimamente non ho seguito il blog del webkit o qualcosa del genere. Inoltre non ho davvero cercato con certezza dove riportare bug come questo, quindi probabilmente dovrei farlo qualche volta ... –
Ho segnalato questo come un bug in Bugzilla del webkit => https://bugs.webkit.org/show_bug .cgi? id = 58982 ma non ho ancora ricevuto alcun feedback – Maverick