Animation de l'image clé CSS avec la transformation des clichés de transformation en pixels entiers dans IE 10 et Firefox

Il apparaît à la fois 10 IE et Firefox s'enclenche éléments de pixels lors de l'animation de leur position à l'aide de traduire de transformation 2d dans un css animation avec des images clés.

Chrome et Safari ne le fait pas, qui semble beaucoup mieux lors de l'animation des mouvements subtils.

L'animation est réalisée de la manière suivante:

@keyframes bobbingAnim {
   0% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: translate(0px, 12px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: translate(0px, 0px);
       animation-timing-function:ease-in-out
   }
}

Voici un exemple de ce que je veux dire:

http://jsfiddle.net/yZgTM/.

Il suffit de l'ouvrir dans Chrome et IE 10 (ou Firefox), et vous devez noter la différence dans la douceur de la motion.

Je me rends compte qu'il pourrait y avoir de nombreux facteurs qui influent sur ce comportement comme si l'élément est dessiné avec l'accélération matérielle ou non.

Personne ne sait d'un correctif pour essayer de forcer les navigateurs de toujours dessiner les éléments de la sous-pixels?

J'ai trouvé cette même question, mais la réponse a été d'animer à l'aide d'un traduire transformer, ce qui est exactement ce que je fais:
Transitions CSS3 'accrocher au pixel'.

Mise à jour:
Après avoir joué un peu, j'ai trouvé un fix pour Firefox, ne pas faire n'importe quoi dans IE 10. L'astuce est de réduire l'échelle de l'élément un tant soit peu et utiliser translate3d avec un 1px décalage dans l'axe Z:

@keyframes bobbingAnim {
   0% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }

   50% {
       transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
       animation-timing-function:ease-in-out
   }

   100% {
       transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
       animation-timing-function:ease-in-out
   }
}

source d'informationauteur Strille

  1. 4

    J'aime votre question!
    Bon travail dans noticining les pixels composant logiciel enfichable dans firefox et IE10.

    J'ai fait des recherches à ce sujet il y a un moment et je vous conseille de vérifier la GSAP les forums, car ils ont de l'information à un grand nombre d'informations utiles sur les animations web.

    Voici un sujet qui concerne IE10 pixel-snap problème.

    Ce que vous devez faire est d'ajouter un minimum de rotation de l'élément, de sorte que IE et Firefox, retrace d'une manière différente - qui ne cessera de pixels composant logiciel enfichable pour de bon 🙂

    Tyr ceci:

    @keyframes bobbingAnim {
  0% {
   transform: translate(0px, 0px) rotateZ(0.001deg);  
   animation-timing-function:ease-in-out
  }
  50% {
    transform: translate(0px, 12px) rotateZ(0.001deg);
    animation-timing-function:ease-in-out
  }
  100% {
   transform: translate(0px, 0px) rotateZ(0.001deg);
   animation-timing-function:ease-in-out
  }
}
  2. 0

    @Nemanja est correct, vous trouverez que si vous ajustez la vitesse, vous pourrez mieux voir les résultats c'est assez typique avec les animations css. Aussi il n'a pas vraiment faire une différence dans ce cas, si vous activer l'accélération matérielle. J'ai rangé un peu le code et il a couru sans aucun problème, je n'ai pas ie10; Cependant, j'ai 11. Vous peut-être juste la suppression de la deuxième transformation de translateZ s'il ne fonctionne pas dans 10

    body {
    background-color: #ccc;
}

.bobbing {
    position: absolute;  
    animation: bobbingAnim ease-in-out .5s infinite;
    -moz-animation: bobbingAnim ease-in-out .5s infinite;
    -webkit-animation: bobbingAnim ease-in-out .5s infinite;    
}

.bobbing.text {
    font-size: 50px;
    color: #000;
    left: 30px;
    top: 30px;
}

.bobbing.image {
    left: 30px;
    top: 150px;
    background: url(http://placehold.it/300x100/aa0000&text=Bobbing+image) 50% 50% no-repeat;
    width: 310px;
    height: 110px;
}

@keyframes bobbingAnim {
   50% {
       transform: translate(0, 12px) translateZ(0);       
   }
}

@-webkit-keyframes bobbingAnim {
   50% {
       -webkit-transform: translate3d(0, 12px, 0);       
   }
}

@-moz-keyframes bobbingAnim {
   50% {
       -moz-transform: translate3d(0, 12px, 0);       
   }
}
  3. -4

    Il ne peut pas être d'un demi-pixel mouvement, il n'y a pas une telle chose.

    Votre problème est la vitesse et la fluidité de l'animation, de ne pas "l'accrochage aux pixels".