javascriptdom-eventsscalecss-transformstouchmove

touchmove event won't fire after scaling image (scale3d)

As you can see here: http://jsfiddle.net/hWm9M/1/ by doing a touchmove while the image is scaling, you can verify in the console that the touchmove event is attached as expected. But when fully scaled, the event won't fire. I tried to attach the event on transitionend, but it didn't worked either.

Here is the code:

var handleStart = function() {
    this.style.webkitTransition = 'all 3s linear'
    this.style.webkitTransform = 'scale3d(2, 2, 0)'
    this.addEventListener("touchmove", handleMove, false)
}

var handleMove = function() {
    console.log(this)
}

var image = document.getElementById("img")
image.addEventListener("touchstart", handleStart, false)

Any idea?

Solution

  • The problem happens when you use scale3d with the Z value == 0

    a work arround i use is passing 1 instead of 0 to the Z value:

    in your case something like: 'scale3d(2, 2, 1)'