Use of translate3d instead of translateX or translateY for -webkit-transform ?

[hakanson]

Saw an CSS3 Hardware acceleration on PlayBook post on the BlackBerry PlayBook forms that says Webkit only hardware accelerates 3d transitions and not 2d ones. This appears to also be true/have been true on iOS as well based on a 2009 stackoverflow question (Slow animation with webkit-transform translate() in iPhone OS 3.0).

Should -webkit-transform translateX and translateY based CSS constructs

.slide.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}

be rewritten to use translate3d?

.slide.in {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-name: slideinfromright;
}

[mynameistechno]

I agree with this. I've been using translate3d myself for same reasons.

[toddparker]

Thanks guys, this is a good tip. We're going to be re-working transitions in the next week or two so this is good timing.

[toddparker]

If either of you have time to set up a branch that uses this approach, that would be really helpful for testing. Anyone want to volunteer?

[mynameistechno]

I wouldn't mind, but I'm kind of new to using git and github. Sounds like I just fork the project, make changes in the fork, then send a pull request?

On Thu, May 12, 2011 at 11:09 AM, toddparker reply@reply.github.com wrote:

If either of you have time to set up a branch that uses this approach, that would be really helpful for testing. Anyone want to volunteer?

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/1603#comment_1148300

[toddparker]

Yep.

On May 12, 2011, at 2:22 PM | May 12, 2011, mynameistechno wrote:

I wouldn't mind, but I'm kind of new to using git and github. Sounds like I just fork the project, make changes in the fork, then send a pull request?

On Thu, May 12, 2011 at 11:09 AM, toddparker reply@reply.github.com wrote:

If either of you have time to set up a branch that uses this approach, that would be really helpful for testing. Anyone want to volunteer?

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/1603#comment_1148300

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/1603#comment_1148380

[jblas]

I just spoke to one of the engineers at Apple regarding this. He confirmed that both 2d and 3d transformations are hardware accelerated when using CSS3 transitions and keyframe animations. We shouldn't have to change anything.

He did clarify that when NOT using transitions and keyframes to animate, that 2d transformed elements are not accelerated to save memory. But, in our case, our transitions always use keyframe animation.

[toddparker]

Thanks for getting such first-hand info on this from Apple. Looks like we should close this and not make changes because we're using keyframe animation for all the transitions.

@hakanson - Thanks so much for you help on this, even though we didn't pull this in!

[hakanson]

I'm glad we could get some first hand info from Apple. The other article I could find on it was June 2010 and pre iOS 4. http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

Also, now we have it documented in case someone else recommends this "optimization."

[hakanson]

Just saw the @paulirish video on HTML5, CSS3, and DOM Performance where he also talks about this and refers to Thomas Fuchs' Visualizing WebKit’s hardware acceleration. I ran the iOS simulator with CA_COLOR_OPAQUE=1 as described in the article and was able to see the red tint indication of hardware acceleration on the existing page transitions.

[mynameistechno]

Cool! thx for the info and links.

On Thu, May 19, 2011 at 11:50 AM, hakanson reply@reply.github.com wrote:

Just saw the @paulirish video on HTML5, CSS3, and DOM Performance where he also talks about this and refers to Thomas Fuchs' Visualizing WebKit’s hardware acceleration.  I ran the iOS simulator with CA_COLOR_OPAQUE=1 as described in the article and was able to see the red tint indication of hardware acceleration on the existing page transitions.

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/1603#comment_1205535