matrix.translate против matrix.translate3d WebKit IPad

Question

Следующий код является частью перехода WebKit для приложения 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); 

Но если я изменю matrix.translate(x,y) к matrix.translate3d(x,y,z) он перестает работать. Теперь я хочу внести это изменение, потому что я читал в нескольких местах, что это будет поддерживаться аппаратным ускорением, а мерцание, возникающее при выполнении вышеприведенного кода, исчезнет.

Может ли кто-нибудь помочь?

Answer 1

В javascript 2d и 3d используются те же методы. Если вы хотите сделать 3D-преобразование, вам просто нужно использовать matrix.translate (x, y, z). Но если вы не используете значение z, нет смысла использовать этот перевод.

Как вы сказали, css translate3d аппаратно ускорен. Но я не знаю о матрице vs matrix3d.

Когда применяется к стилю (currentCanvas.style.webkitTransform), javascript выбирает, должен ли он возвращать матрицу 2d или 3d в зависимости от значения. Чтобы действительно заставить его, вы можете добавить 1 пиксельный перевод на ось z.

Answer 2

Я просто потратил несколько часов на эту проблему мерцания в конце анимации в преобразованиях webkit/ipad/iOS/webWiew.

Я обнаружил, что преобразованный объект помещается поверх других объектов в окне во время преобразования и в конце преобразования, все объекты с более высоким z-индексом перерисовываются, что вызывает мерцает.

Так просто дайте преобразованному div более высокий z-индекс, чем другие объекты, и мерцание исчезает.

Jet