screen tearing during css animation, and choppy css animations

Question

I am using css animations on the receiver app that runs on the chromecast and I've noticed 2 issues with it.

Firstly, the animations are very choopy. I estimate it looked probably about 5 frames per second.

Second is screen tearing issues during the animations. It seems like the system isn't waiting for vblank before swapping buffers?

I've used a test image, and here's my css definitions for the animations:

#testImage {
    animation-name:             seesaw;
    animation-duration:         5.0s;
    animation-iteration-count:  infinite;
    animation-timing-function: linear;

    -webkit-animation-name:             seesaw;
    -webkit-animation-duration:         5.0s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes seesaw {
    0% { left: 0px; }
    50% { left: 500px; }
    100% { left: 0px; }
}
@keyframes seesaw {
    0% { left: 0px; }
    50% { left: 500px; }
    100% { left: 0px; }
}

Am i doing something wrong, or I should avoid using css animations altogether on the receiver app?

Does anyone have any advise on how else I would do animations?

Answer 1

I don't think you are doing anything wrong, it is just that the chromecast device is limited in its animation capabilities. Leon Nichols did some helpful benchmarking here: https://plus.google.com/117916055521642810655/posts/9dBQp7SShv8