-webkit-transition-property for translation

Posted by sexyprout on Stack Overflow See other posts from Stack Overflow or by sexyprout
Published on 2010-12-31T12:22:27Z Indexed on 2011/01/01 11:54 UTC
Read the original article Hit count: 258

Filed under:
|
|
|
|

Hai.
What is the transition property for translations in CSS3? I'm currently using all but I got a bug in iOS so I want to test another property.

-webkit-transform: translate(-320px, 0);

 

-webkit-transition: ??? .5 ease-in-out;

See the bug with an iOS device here (swipe horizontally), there's a kind of flash.


Update: to anyone interested, I found a way to fix it thanks to Duopixel:

E {
    -webkit-transition: all .5s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0); // perform an "invisible" translation
}

// Then you can translate with translate3d(), no bug!
document.querySelector('E').webkitTransform = 'translate3d(-320px, 0, 0)'

© Stack Overflow or respective owner

Related posts about iphone

Related posts about css