Problèmes de transition d'opacité de Webkit avec du texte

Situation:

Afficher les jsFiddle

À l'intérieur d'un div j'ai une image suivi par un texte qui a un font-weight de 900. Dans mon hébergés localement environnement, je suis en utilisant une police personnalisée, mais pour le violon, ci-dessus, j'ai choisi le "toujours aussi élégant" Comic Sans pour illustrer mon point. Avant que quelque chose se produit-je régler l'opacité de l'ensemble de la div à 0,7. Cependant, planant au-dessus de la divje veux l'opacité de tout pour venir à une opacité totale.

Problème:

J'ai remarqué que dans les navigateurs Webkit seulement (plus évident sur Chrome que sur Safari), sur le curseur sur et hors de la div tag, le texte du poids apparaît à changer. En réalité, il n'y a pas de changement à tous, bien sûr, dans le poids du texte. Cependant, en regardant de plus près, vous verrez le texte s'affiche il est souhaité de poids uniquement sur le vol stationnaire, mais pas dans un non-plané de l'état.

Choses que j'ai Faites:

  • J'ai testé cela dans toutes les dernières versions de Chrome, Firefox et Safari.
  • Je suis en train de tester ce actuellement sur le nouveau MacBook Pro qui, dans mon cas, c'est un écran retina. Cependant, le collègue à côté de moi testé le violon sur son iMac (non-retina display) seulement pour trouver le sujet est toujours apparente.
  • Je suis peut-être fou, mais je crois que ce n'est peut-être la façon dont les navigateurs webkit choisir de rendre éléments avec différentes opacités. Puis à nouveau, peut-être juste moi en essayant d'éviter d'admettre j'ai fait quelque chose de mal.

Et, naturellement, j'ai pensé que je pourrais alléger l'atmosphère avec Comic Sans. Voici une capture d'écran pour aider à expliquer le problème:

Problèmes de transition d'opacité de Webkit avec du texte

source d'informationauteur cereallarceny

  1. 24

    Ce n'est pas un problème avec l'opacité lui-même (en fait, en le tournant à 1 dans @Zoltan l'exemple ne change rien pour moi).

    Le problème est avec les transitions, il y a deux anti-aliasing modes de webkit pouvez utiliser:

    1. De sous-pixel (valeur par défaut, mais pas pris en charge lors des animations, des transitions ou des transformations) ou
    2. En niveaux de gris

    Cela signifie que lorsqu'un élément est affiché à l'aide de sous-pixel de l'antialiasing et une animation est appliqué, webkit passe temporairement à niveaux de gris pour la durée de l'animation, et retour à la sous-pixel, une fois terminé.

    Étant donné que subixel l'anticrénelage des résultats légèrement plus lourd face à la police, vous obtenez les indésirables artefact.

    Pour résoudre le problème, ajouter ceci dans votre css:

    html {
    -webkit-font-smoothing: antialiased;
}

    Cette forces en niveaux de gris de l'antialiasing et tout le texte et vous ne verrez pas la commutation.

    (résultat final: http://jsfiddle.net/ErVYs/9/)

  2. 13

    Une solution possible serait de faire de l'opacité de la transition de ne pas 1mais .999 - http://jsfiddle.net/ErVYs/2/

    div {
    width: 200px;
    text-align: center;
    opacity: 0.7;
    transition: opacity ease-in 0.25s;
    -webkit-transition: opacity ease-in 0.25s;
    -moz-transition: opacity ease-in 0.25s;
    -o-transition: opacity ease-in 0.25s;
}

div:hover {
    opacity: .999;
}