Css transition using  -webkit-transition: all 0.5s ease-in-out;

Testing animating both margin-left and transform: translateX();


Device
margin-left
transform: translate();
transform: translateX();
Top with Pos Relative
DMP
Choppy
Incredibly choppy - only a few frames. "pops" Y axies on last frame.
Incredibly choppy - only a few frames. "pops" Y axies on last frame.
Smooth
Samsung
Works but choppy
Plays smoothly
Plays smoothly
Smooth but not quite as smooth as translate
iPad



Smooth but skips frames and has render artifacts




Note, due to the fact the screen is refreshed top to bottom on the DMP, vertical animations may appear smoother than horizontal animations, due to screen tearing.


Testing a css transition with both a translate and fade

Dmp
iPad
Samsung
Terribly choppy with both margin-left and transform
Smooth
Smooth



Notice:



Samsung - position: relative:


Rendering *any element* on a Samsung screen using ```position: relative;``` will cause slow-downs when animation occurs, regardless of what is animating. *Don't use it*.


Samsung - background-color :


Animating `background-color` property causes black screen during animation