Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 67
Registered: ‎06-28-2012
My Device: BlackBerry Z10LE
My Carrier: T-Mobile

Great animation or great responsivness - why can't I have both ?!

I'm writing an application that is very much dependat on the user dragging images on the screen.

I've noticed that when I apply any one of the CSS properties

  • -webkit-transform
  • -webkit-backface-visibility
  • -webkit-perspective
  • perhaps box shadow?

then the images being dragged are starting to lag behind the finger.

It's enough that I apply only -webkit-perspective attribute but never use any of the 3d transitions - the dragging becomes a bit laggy.

 

I can freely use -webkit-transition - it doesn't slow down the drag.

 

BUT - applying any of the properties mentioned above, makes all my animations (performed by -webkit-transition) a lot faster!

 

So what is the reason for such a behaviour? Why after I apply those properties my animations are faster, but the dragging is slower?

 

I would really love to have both - great animations and great responsivness :smileyhappy:.

Developer
Posts: 67
Registered: ‎06-28-2012
My Device: BlackBerry Z10LE
My Carrier: T-Mobile

Re: Great animation or great responsivness - why can't I have both ?!

OK, I'm guessing that without those certain CSS attributes my animations aren't GPU accelerated (but are still faster then javascript animations because the browser does all the calculations natively).

 

This page gives some clues: http://www.html5rocks.com/en/tutorials/speed/html5/

 

But I'm still curious, why enabling the GPU to do the animation makes dragging an image slower?