CSS3 transition déconner les polices dans webkit?
Depuis que j'ai ajouté une transition css (le premier était sur le vol stationnaire, le deuxième était une animation), il semble avoir foiré mes polices de caractères, ils ont l'air "différents".
C'est totalement bizarre, j'ai cherché pendant des heures et ne peut pas trouver quelque chose sur elle, je ne peux pas comprendre exactement pourquoi il se passe.
Il semble être ok sous firefox, mais safari et chrome sont d'avoir des problèmes.
Tout en dessous de l'engrenage de l'animation en bas à gauche semble ressembler à un plus léger de la police de poids et le menu de navigation semble le même.
Je suis totalement perdue sur ce coup.
Voici le CSS pour l'animation.
.gearone {height:100px;
width:100px;
top:-10px;
left:-10px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
-webkit-animation-name: backrotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: backrotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
.geartwo {height:100px;
width:100px;
position:absolute;
background-position:center;
background-repeat:no-repeat;
background-image:url(../images/gearone.png);
top:20px;
left:10px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 13s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration: 13s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count: infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes backrotate {
0% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes backrotate {
0% {
-moz-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
source d'informationauteur andy
Vous devez vous connecter pour publier un commentaire.
Ce que vous voyez est webkit anti-alias de votre texte car il est de le traiter comme une texture, par opposition à un vecteur. Il n'y a pas beaucoup que vous pouvez faire, d'autres que de ne pas en utilisant des transformations, ou à l'aide d'un texte de remplacement pour fournir une image à la place de votre type.
Il y a un quelques threads concernant webkit aliasing, mais je n'ai personnellement pas eu beaucoup de chance de garder le type de type de, et toujours en utilisant des transformations.
Je pense que j'ai eu un problème similaire, et qu'il fixe pour moi a été l'ajout d'
à mon corps css. Lors de l'animation de tout type arrive, webkit essaie de lisser le texte pour aider à l'animation, afin de l'ajouter à commencer par l'empêche de changer ou différentes.
j'ai eu le même problème. wile l'exécution d'une webkit transition certains de texte d'ancrage est devenu l'anticrénelage.
après plusieurs essais, j'ai trouvé que cela arrive seulement dans les éléments qui sont positionnés et ont z-index à l'intérieur d'autres éléments positionnés trop et avec z-index.
à l'intérieur du pied de page j'ai
et c'est ma transition
J'ai eu ce problème en Chrome pour OSX. À l'aide de
-webkit-backface-visibility: hidden;
résolu le problème.J'ai été confronté à ce problème à de nombreuses reprises et ont eu du succès en ajoutant le code css suivant à l'animation de l'élément:
Il semble qu'il a besoin à la fois de z-index et position pour être efficace. Dans mon cas je l'utilise avec la Police animé Génial filateurs.
Comme indiqué ci-dessus,
-webkit-font-smoothing: antialiased;
fonctionne sur le bureau de Safari.Mais sur iOS, vous devez utiliser
-webkit-backface-visibility: hidden;
afin de résoudre ce problème.Je ne suis pas exactement sûr de la raison pourquoi il se passe, mais ça ressemble quand votre
.geartwo
élément (100px x 100px) chevauche votre texte, il semble pour l'alléger. Quand il sort, c'est le retour à la normale. Moi aussi, remarquez ceci, uniquement dans les navigateurs webkit.Pour résoudre ce problème, vous pouvez réglez la vitesse
width
etheight
à40px
(qui est la taille de l'image en tout cas, je ne vois pas la nécessité pour elle d'être 100px x 100px), et puis re-positionner en conséquence.EDIT: je ne suis pas sûr que vous devez faire après ma proposition, mais j'ai trouvé cette discussion après un peu de recherche.
Tout
-webkit-backface-visibility: hidden;
est une solution partielle, c'est très ruines de l'écran de votre texte, surtout si vous avez de lissage /AA activé. Ce bug est méchant, parce que cela se produit uniquement lorsque vous utilisez la propriété transform.Après environ 2 ans de façon sporadique en visitant cette rubrique tous les autres mois, j'ai trouvé une solution. Vous avez besoin d'ajouter un
position:relative
à la css de l'élément qui est en cours d'animation. Il ya un hic cependant, vous avez besoin de lui donner unz-index
valeur est supérieure ou inférieure à l'élément que vous voyez la distorsion sur. Ceci fixe à 100%.Depuis le sujet ne dispose pas d'une "certaine" de réponse, j'espère que cette réponse aide à quelqu'un qui était dans le même bateau, j'ai été en pour ans.
Pour iOS8, la seule façon que j'ai réussi à retirer la transformation scintille est par l'adjonction de
body * { -webkit-transform: translate3d(0, 0, 0); }
à ma feuille de style.
Tout ce que vous devez faire est d'ajouter cette règle CSS pour tout élément que vous voyez le scintillement sur:
Et c'est tout.