css - translate3d would cause element draggable in the mobile browser?

Question

My dom structure and javascripts are like http://jsfiddle.net/vishl/wzPSF/

(I am using AngularJS to do the animation)

Everything works well in desktop computer.

But in the mobile device, when the translate3d animation triggle, with the touchmove event, the wrapper become draggable.

Is there any solution ?

Answer 1

When the translate3d occur, the document's width is not the origin width. It has become translateX + origin width.

So, the easiest way to fix this issue is, add the follow code to your css.

html, body {
    overflow-x: hidden;
}