Matrix.translate vs matrix.translate3d webkit ipad

Question

Le code suivant fait partie d'une transition webkit pour une application Ipad:

#canvas { 
     -webkit-transition-property: -webkit-transform;; 
     -webkit-transition-duration: 1s; 
     -webkit-transition-timing-function: ease-out; 
     position:absolute; 
     z-index:1; 
    } 

...

var containerTrsfrm = window.getComputedStyle(currentCanvas).webkitTransform; 
    var matrix = new WebKitCSSMatrix(containerTrsfrm); 
    matrix = matrix.scale(1.5, 1.5); 
    currentCanvas.style.webkitTransform = matrix.translate(100, 100); 

Mais si je change matrix.translate(x,y) à matrix.translate3d(x,y,z) ça arrête de fonctionner. Maintenant, je veux faire ce changement parce que j'ai lu à plusieurs endroits que cela sera pris en charge par l'accélération matérielle et le scintillement qui se produit lors de l'exécution du code ci-dessus, va disparaître.

Quelqu'un peut-il aider?

Answer 1

En JavaScript 2d et 3d utilisent les mêmes méthodes. Si vous voulez faire une transformation 3D, il vous suffit d'utiliser matrix.translate (x, y, z). Mais si vous n'utilisez pas la valeur z, il est inutile d'utiliser translate de cette façon.

Comme vous l'avez dit, le css translate3d est accéléré matériellement. Mais je ne connais pas vraiment matrix vs matrix3d. Lorsqu'il est appliqué au style (currentCanvas.style.webkitTransform) javascript, choisissez s'il doit renvoyer une matrice 2d ou 3d en fonction de la valeur. Pour vraiment le forcer, vous pouvez toujours ajouter une traduction de 1 pixel sur l'axe z.

Answer 2

Je viens de passer quelques heures sur ce problème de scintillement à la fin des animations dans webkit transforms/ipad/iOS/webWiew. Ce que j'ai trouvé est que l'objet en cours de transformation est placé au-dessus des autres objets dans la fenêtre pendant la transformation et à la fin de la transformation, tous les objets qui ont un index z plus élevé sont redessinés, ce qui provoque la vacillant.

Donc, donnez simplement à la div transformée un indice z plus élevé que les autres objets et le scintillement disparaît.

Jet