Hello,
My coworker made this animation prototype:
http://animation.addlab.it/ledbyled/index.html
However, after a good amount of analysis, it seems like chrome's MSAA rasterization is causing an heavy framerate drop. When MSAA is disabled (chrome://flags/#gpu-rasterization-msaa-sample-count set to 0), the frame rate is around 50fps, but when MSAA is enabled (as it is by default) it drops to 10fps (the exact rate depends on how big is the screen).
Doing a trace on the timeline, the bottleneck seems to be on the composite layer: with MSAA it takes more than 200ms, while it's 9ms when disabled!
Honestly we don't have a clue on how to solve this and clearly we can't say to our users to disable MSAA... Is there any known work around?
I tried the `will-change` CSS property, but nothing changed.
Thanks!
PS: if you want to rerun the animation without reloading the page, just run `init()` in the console.