CSS3 animation + jQuery not working properly on mobile

Question

I'm using TouchSwipe plugin to make some animations. The main problem is on this event:

    $(".swipe-area").swipe({
    swipeStatus: function (event, phase, direction, distance) {
        if (phase == "move") {
            $('.book').css({
                '-webkit-transform': 'rotateY(' + distance + 'deg)',
                'transform': 'rotateY(' + distance + 'deg)'
            });
        }
    },
    triggerOnTouchEnd: false,
    threshold: 90
});

The markup:

<div class="book-container">
    <div class="book-flipper">
        <div class="book">
            <img src="assets/img/book.png" alt="" width="260" height="560">
        </div>
    </div>
</div>

And the CSS:

.book-container {
    -webkit-perspective: 1000;
    perspective: 1000;
    position: absolute;
    left: 766px;
    top: 278px;
    z-index: 99;
}

.book-container, .book {
    width: 260px;
    height: 560px;
}

.book-flipper {
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

.book {
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    -webkit-transform: rotateY(0deg) ;
    transform: rotateY(0deg) ;
}

On desktop, it's work fine. But on mobile (iPad Safari), the image don't animate while touch and drag.

try `-webkit-transition: all 0.6s;`. Safari is hard on transition property specification. — Karl-André Gagnon, Mar 25 '15 at 12:50
Try to `alert` in `if (phase == "move") {` for verifying the condition. — Rohan Kumar, Mar 25 '15 at 12:54

score 0 · Answer 1 · answered Jul 14 '15 at 08:41

i have created a jsfiddle we can perhaps work on. http://jsfiddle.net/symeon/81u303oa/ or for the full screen result https://jsfiddle.net/symeon/81u303oa/embedded/result/

This does work on my Galaxy s5 - is your markup slightly different, i changed it to add the swipe-area class to the .book-container div.

<div class="book-container swipe-area">
    <div class="book-flipper">
        <div class="book">
            <img src="https://www.kidspass.co.uk/assets/membership-card-front.jpg" alt="" width="260" height="560">
        </div>
    </div>
</div>

The css and js are as you posted above.

CSS3 animation + jQuery not working properly on mobile

1 Answers1