Performances issue when above a video element

[vincentwinkel]

I saw many tickets about performances, but none of them can fix my issue.

I cannot show any code here, but I'm using Flickity as slider on top on video + canvas elements (including face tracking + 3d rendering, very resource-consuming).

When the video is off, the slider works well. The video being on, the perfs drastically decrease and the sliding effect is jerky.

Checking a bit the code, I'm wondering why you use some CSS properties that you update every milliseconds instead of just using CSS animations / transitions. Also, using 3d transformations in CSS seems less resource-consuming.

I made a video here: https://beta.winky.fr/flickity.webm

[vincentwinkel]

Here is an interesting article about animations: https://github.com/vincentwinkel/MIDISequencer/blob/master/screen.png