L'alias de texte Webkit devient bizarre pendant les animations CSS3

C'est un funky. Et je suis sûr que c'est webkit liés, car il ne semble être un problème dans la Version Chrome 20.0.1132.57 et Safari 5.1.7. J'ai mis en ligne une courte vidéo pour expliquer le problème, car il serait presque impossible d'expliquer par texte.

Vidéo:
http://youtu.be/0XttO-Diz2g

Version courte:
Pendant les animations CSS3, le texte qui est positionné à l'intérieur d'un élément (absolue ou relative) semble changer de lissage. Il devient de plus en plus audacieux, tandis que les animations sont en cours d'exécution.

Remarque:
Ce n'est pas la même que l'échelle des éléments de plus en floue diring une animation. (ce problème)

Des idées, des solutions de contournement, etc?

source d'informationauteur Jeremy Ricketts

  1. 23

    Mise à jour: Mon ancienne réponse ci-dessous fonctionne, mais est seulement une hacky façon de résoudre le problème. Au lieu de cela, lisez ceci pour la raison pour laquelle les autres éléments sont affectés: http://jsbin.com/efirip/5/quiet. En bref: une animation élément doit être placé dans son propre contexte d'empilement en lui donnant un z-index.

    Vieille réponse:

    C'est WebKit liés. Honnêtement, je ne suis pas sûr de savoir pourquoi il le fait et je suppose que c'est un bug trop. Vous pouvez empêcher cela en ajoutant un 3D liées CSS3 déclaration à n'importe quel élément de la page. Exemple:

    body {
    -webkit-transform: translateZ(0);
}

    Ou:

    body {
    -webkit-backface-visibility: hidden;
}

    La présence de ces déclarations causes WebKit pour utiliser l'accélération matérielle pour les animations qui empêche le problème que vous avez souligné.