Animating elements with CSS transforms in response to pointer input is painfully slow on a low-performance tablet

Question

Hi all,

I am capturing y-translate and y-translate-inertia gestures in a div with some elements in it (absolutely positioned). For each delta I am animating the elements with a CSS transform on the y-axis. The animation runs smoothly on my dev (desktop) machine but it is painfully slow when testing on a DELL Inspiron Duo tablet. I'm testing on this tablet because of its overall low performance (I want my code to run fast everywhere :)). The problem arises during normal pan gestures where (the delta is small) whereas the inertia animation is much much better, you can hardly say it stutters compared to that during normal panning.

How am I doing the animation? I tried all approaches available in WinJS:

• Animating a CSS property - this is a dependent animation, so it's just useless.
• The animation library - it cannot synchronize the animation across multiple elements properly.
• MSCSSMatrix - performance analysis shows that setting element.style.msTransform to the matrix is extremely inefficient.
• The translateY method - performance analysis shows that setting element.style.msTransform to the string 'translateY(value)' is also extremely inefficient.

So, currently I'm out of options. The same animation implemented in a XAML application is perfectly smooth on the same tablet, so there must be something really wrong with animations in the WinJS world. I don't know if this is a bug or something but it is unacceptable.

Have any one of you ran into this problem? Am I missing something or is this a bug? Is there another way of achieving smooth animations in WinJS?

Regards,
Simich

Answer 1

What are the specs on your tablet?  Do the animation samples on IE 10 Testdrive have the same performance as on your desktop?

---

Jeff Sanders (MSFT)

Answer 2

Hi,

If the tablet’s hardware is extremely poor, you can provide an option to disable animation. If that’s not an option, I think it is needed to let the user know their computer is below the minimum supported hardware.

Best Regards,

Ming Xu.

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail].
Microsoft One Code Framework

Answer 3

Hi guys,

@jpsanders No, the animations on the tablet run at significantly lower FPS than those on the desktop but I don't think that's the answer to my question.

The thing is that the same y-translation animation, implemented in XAML, runs on the same tablet *perfectly* - I have a completely smooth and fast animation. I dug deeper and profiled the HTML code - setting the msTransform property of an element is what is slow.

So, I wonder why IE10 (which actually runs HTML Metro style Apps) performs so bad? Doesn't it use the Direct2D APIs for the animations? If not, that seems as a serious downside of developing rich and immersive HTML Metro style Apps to me.

In any case, I'm waiting for the RTM to see whether MS have improved things - otherwise I do not see a solution.

Regards,

Simich

Answer 4

Can you give me a simple app that reproduces the issue?

-Jeff

---

Jeff Sanders (MSFT)

Answer 5

Hi Jeff,

Yes, here is a sample app. And btw this is the tablet I'm testing on.

Regards,

Simich

Answer 6

Thanks!

---

Jeff Sanders (MSFT)