web-dev-qa-db-fra.com

La transition de couleur CSS3 ne fonctionne pas dans Chrome

Les liens dans le menu de gauche dans ce site Web ont une propriété de transition CSS3 de color, qui change au survol de la souris. Cela ne fonctionne pas dans Chrome 16 ou 17 (le changement de couleur est soudain), contrairement aux autres transitions du site Web. Cela fonctionne dans Firefox, Opera et même Safari, qui utilise un kit Web tel que Chrome. Je ne pense donc pas que cela puisse poser un problème avec mon CSS. Quoi alors?

Voici mon CSS de cette partie (le CSS complet est ici ):

#menu a
{
color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */
}

#menu a:visited
{
color: gray;
}

#menu a:hover
{
color: black;
}

MISE À JOUR! Apparemment, cela a probablement été corrigé dans la version bêta 18. Toutefois, si vous avez rencontré ce problème, veuillez consulter le rapport de bogue lié à la réponse acceptée ci-dessous et relancer le problème.

cssgoogle-chromecss3webkitcss-transitions
25
Abhranil Das

@ Nijikokun je peux confirmer la même chose. : les liens visités ne transitent pas correctement dans Chrome. Hourra. Il semble que ce soit un problème qui a surgi dans la version 16 et n'a jamais été résolu. Quelques rapports de bogues sont ouverts sur le site Chromium.

http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Status%20Owner%20Summary

35
Darren Kovalchik

J'ai essayé de trouver une solution de contournement (plus de détails dans mon blog: http://kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug )

Il semble que si vous déclarez un: visité avec une couleur (couleur, fond, couleur de bordure, etc.) transparent, il fonctionnera comme une solution de contournement. Je n'ai pas encore effectué de tests approfondis, ravi de recevoir des commentaires.

3
Álex Acuña Viera

Ce n'est pas un problème qui ne fonctionne pas, mais le lien visité: la transition n'est pas en cours, donc cela peut fonctionner pour vous si vous n'avez pas cliqué dessus, mais si vous l'avez fait, ce ne sera pas le cas.

Je ne connais pas de solution, je suis toujours à la recherche d'une ...

2
Nijikokun

. . Je pensais que ce serait bien de remarquer que ce n'était pas un bug, mais un comportement. Citation des Documents de développement Mozilla :

Impact sur les développeurs Web

Globalement, cela ne devrait pas affecter les développeurs web de manière trop significative. Il existe toutefois quelques cas particuliers pouvant nécessiter des modifications de sites:

(...)

Les transitions CSS ne seront pas prises en charge pour les liens visités. Heureusement, les transitions CSS sont très nouvelles et peu de sites les utilisent à ce stade-ci. Cela ne devrait donc pas avoir un impact important sur de nombreuses personnes.

2
diego nunes

Comme Darren Kovalchik l'a écrit dans son asnwer ( https://stackoverflow.com/a/8524199/1010777 ), le Chrome a un bogue à ce sujet. 

Une solution de contournement possible consiste à appliquer une animation couleur à l'élément parent du lien et à définir la couleur du lien à hériter. Dans ce cas, l'animation fonctionne bien même si le lien est: visité.

html:

<span class="whateverLinkParent">
    <a href="#">whateverLinkText</a>
</span>

css:

.whateverLinkParent { animation: whateverTextColorAnimation 1s infinite; }
.whateverLinkParent a { color: inherit; }
@keyframes whateverTextColorAnimation {
    0%, 100% { color: #686765; }
    50% { color: #2E2D2B; }
}

Bien sûr, cette solution de contournement ne peut pas fonctionner si le réglage de la couleur du lien du parent est un problème, mais dans tous les autres cas, cela donne une solution simple et propre.

1
Burnee

Deux de mes liens de transition fonctionnent, mais le reste ne fonctionne pas en chrome. Ils utilisent tous le même paramètre. Ils semblent fonctionner lorsque le lien est soit mailto:, soit callto: - curieusement étrange si vous me le demandez. 

0
popotan

Si vous supprimez la couleur du comportement visité, il devrait alors fonctionner comme prévu. Lorsque la couleur est définie dans: comportement visité, même: la couleur de survol (sans transition) ne fonctionne pas comme prévu.

0
rovsen

Je rencontrais toujours le même problème et trouvais une solution qui fonctionnait pour moi. 

J'ai pu résoudre ce problème en utilisant la pseudo-classe :link comme ceci: 

#menu a, #menu a:link {
  color: gray;
  transition: color 0.5s;
}

#menu a:hover {
  color: black;
}
0
sam

Essayez d’utiliser #ccc et # 000 plutôt que gris et noir.

edit: Comme si: http://jsfiddle.net/qtzEj/

J'espère que cela pourra aider :)

0
will