CSS3 Transformer provoquant le scintillement du texte dans Safari et Firefox Mac Yosemite

Note d'OP: vous semblez être au moins au courant de la plupart de ces concepts, mais j'ai compris beaucoup de détails dans cette réponse pour quelqu'un d'autre qui pourrait avoir un problème similaire.

Dans les navigateurs modernes en cours d'exécution sur un ordinateur qui possède un GPU (processeur pour le rendu des graphismes), le navigateur va parfois décalage de la tâche de rendu de la page web à partir de votre CPU (le "normal" du processeur) pour le GPU. Le CPU et le GPU ont chacun leurs propres forces et faiblesses de la nature de la GPU est qu'il peut rendre en 3 dimensions les transformations de manière très efficace, mais peut ne pas être en mesure de rendu du texte en clair en croquant que le CPU ne.

Votre vol stationnaire effet est à l'aide d'une transformation que votre navigateur a jugé approprié pour l'accélération matérielle pour le rendu sur GPU (plus probablement déclenchée par le scale(1.1) transformation), et donc il a changé de rendu temporairement pour le GPU alors que le hover de l'animation et de transition se produit. Après l'animation est réalisée, le PROCESSEUR prend plus de nouveau rendu. En raison des différences de rendu des stratégies utilisées par les différentes pièces de matériel, le texte est différent (moins vif), tandis que le GPU est en charge.

Malheureusement, nous n'avons pas (encore) de contrôle explicite de l'accélération matérielle via le CSS, le navigateur établit que chaque fois qu'il veut. Ce que nous pouvons faire, cependant, est de définir certaines propriétés que nous suspect va mettre le navigateur en accélération matérielle GPU mode. La théorie est ici que nous allons garder le navigateur en mode GPU, même lorsque l'animation n'est pas de se produire, de sorte que nous ne voyons pas un "scintillement".

Cette stratégie a quelques inconvénients: les utilisateurs qui visitent votre site web sera une expérience légèrement augmenté utilisation de la mémoire vive, tandis que votre page est ouverte, et mobile /ordinateur portable de l'utilisateur a légèrement augmenté, de l'épuisement de la batterie. Sur les appareils qui n'ont pas de GPU dédié, l'accélération matérielle ne sera pas déclenché (mais là encore, ces dispositifs ne serait pas en voyant le "scintillement" que vous voyez de toute façon).

Il semble que vous avez tenté de le faire déjà par l'ajout de la scale(1.0) propriété à l'onu, a plané élément -- ma meilleure supposition est que votre navigateur(s) obtenu "intelligent" et a détecté que cette règle ne fait rien et l'ont ignoré. Le plus fiable que de déclencher l'accélération matérielle est généralement une transformation sur l'axe des Z. Essayez de changer votre transformation à la suivante:

@include transform(scale(1.00001), translateZ(0.00001));

Plutôt que d'utiliser les valeurs "1" et "0", je suis en utilisant infiniment proche des valeurs; j'espère que cela va empêcher le navigateur d'être "intelligent" et ignorer la règle.

Je suis en supposant que votre Sass inclure il est en train de faire vendeur-la préfixation. Double-vérifier que le résultat final ne comprend pas seulement la -webkit-transform: et -moz-transform:mais qu'il contient aussi de l'onu précédé d' transform: de la syntaxe. Si vous voulez être certain (pour les fins de débogage), il suffit de les taper manuellement:

.usp .icon {
  transform: scale(1.00001), translateZ(0.00001);
  -webkit-transform: scale(1.00001), translateZ(0.00001);
  -moz-transform: scale(1.00001), translateZ(0.00001);
}

Sur ma fin, je n'ai pas l'expérience de tout scintillement de commencer avec votre violon (je soupçonne que mon navigateur/OS/configuration matérielle ne pense pas qu'un 2-dimensions de l'échelle est appropriée pour le GPU), donc je ne suis pas en mesure de tester ce code. Cependant, j'ai utilisé des techniques similaires pour résoudre des problèmes similaires assez souvent.

OK!

Donc, le problème que j'ai été confronté a été personnalisé dans un popup où j'avais une roue d'effet sur le bouton croix à l'aide de css transition. Mais qui a provoqué le scintillement question dans la fenêtre contextuelle.

Après la visite de différents portails en ligne, j'ai appris à connaître que la transition de la propriété:

webkit-backface-visibility: hidden;

sur la transition de l'élément fonctionne vraiment et arrête le clignotement. Mais l'utilisation de cette propriété floue, l'ensemble du composant (popup) dans mon cas et pour arrêter cela, j'ai dû utiliser une autre propriété sur l'élément racine de la composante:

webkit-transform: translate3d(0, 0, 0);

mais comme je l'utilise personnalisé dans un popup qui a déjà été traduit -50% selon la direction y pour le garder dans le centre, j'ai été restreint à ne pas l'utiliser.

Après avoir joué avec les propriétés css pour les jours et essayer différentes solutions, j'en suis venu à la conclusion que la hauteur totale du composant dans lequel la transition élément est utilisé doit être MÊME et dans le cas de la dynamique de données, nous avons besoin d'ajuster les marges et les rembourrages de telle manière que la hauteur totale reste MÊME.

Cela a résolu mon problème. Juste assurez-vous que la hauteur totale reste MÊME et ajuster les marges et les rembourrages en conséquence.

Espère que cela aide quelqu'un dans le besoin. 🙂

J'ai trouvé cela se produit surtout sur les éléments qui ont été transformées (ie: un modal qui se glisse dans). Est-il une transformation sur l'un des éléments de parent?

Il y a une tonne de bugs sur le web pour les navigateurs basés sur webkit, mais rien pour Firefox.