animation - matrix.translate vs matrix.translate3d webkit ipad -


the following code part of webkit transition ipad app:

#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); 

but if change matrix.translate(x,y) matrix.translate3d(x,y,z) stops working. now, wanna make change because read in several places supported hardware acceleration , flickering occurs when executing code above, go away.

can help?

i spent few hours on flicker problem @ end of animations in webkit transforms / ipad /ios / webwiew.

what found object being transformed placed on top of other objects in window during transform , @ end of transform, objects have higher z-index redrawn, wich causes flickering.

so give transformed div higher z-index other objects , flicker disappears.

jet


Comments

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

aspxgridview - Devexpress grid - header filter does not work if column is initially hidden -

c# - How to execute a particular part of code asynchronously in a class -