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

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *