Phonegap transitions on CSS transforms not rendering.

Question

I'm having a bit of trouble working with CSS transitions on phonegap. We're transitioning a transform: translate3d property to have content views slide in and out of view, as well as sliding to reveal a side bar.

Here's an example of the webapp (note the transitions work in browser): http://ferriesapp.ca/app/

You will see that the transitions work perfectly in browser both on phone and on desktop. But as soon as I "phonegap" it the transitions just don't render. The final position shows up, for example if I hit a departing list item it will show the corresponding arrival list items. But for some reason the animation just doesn't happen on phone gap. The only exception is that it works on iOS7 when put through phonegap, but not iOS 6 or any version of Android.

Here's a small snippet of the code:

Here is what the CSS on the sliding element looks like

#depart-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
}

Here's the animation class:

.animate {
    transition: transform 0.2s ease-out;
    transition: -webkit-transform 0.2s ease-out;
    transition: -moz-transform 0.2s ease-out;
    transition: -ms-transform 0.2s ease-out;
    transition: -o-transform 0.2s ease-out;
}

And finally the JS that calls it (note this is not the whole function):

$("#depart-content").css({"transform":"translate3d(-100%,0,0)","-webkit-transform":"translate3d(-100%,0,0)","-moz-transform":"translate3d(-100%,0,0)","-o-transform":"translate3d(-100%,0,0)","-ms-transform":"translate3d(-100%,0,0)"});

If anyone has any suggestions they would be hugely appreciated

Thanks!

P.S. I know there is a CSS3 @keyframes rule that works quite well, but I'd rather avoid that for simplicity of code

Answer 1

Your statement about it working on iOS7 but not on iOS6 leads me to believe that this is happening due to your translate3d statement.

I am assuming you put in this line to enable hardware acceleration -

 transform: translate3d(0,0,0);

However, there are several reports that this does NOT infact trigger hardware acceleration in iOS 6 devices.

In the article I quoted, the author mentions that using any one of the following commands, will trigger hardware acceleration.

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;