Causes performance and/or memory issues when combined with animation libraries

[jscalo]

Describe the bug When using an animation library such as animejs which modifies inline transform styles, Clarity seems to consume large amounts of memory as it adds mutation observers to the elements that the animation is attached to. E.g. our site has 3 animating elements, and Clarity was adding 180 mutation observers per second. While that happens the animations seem chunky and the site lags. Eventually the browser will OOM.

It's not clear whether it was destroying the old observers, but if not then perhaps that's the culprit of the memory skyrocketing.

I'd hoped that decorating these elements with data-clarity-mask="True" would exempt them from Clarity's purview, but apparently that's only a reporting level thing because it had no effect.

Repro Steps Use an animation library such as animejs with a website that import clarity. Not sure if it's related but our website is pretty large, with 10k+ nodes in the DOM. On Chrome after a few minutes the browser will show an "aw snap" error either with "error 5" or "out of memory".

Project info Seen on Clarity v0.8.30

Browser info: Chrome 140.x on both Mac and Windows

[nairmanu]

@jscalo can you please share your website URL for us to investigate the issue

[jscalo]

Unfortunately this is a site that's currently in private testing so I'm unable to share at this time. Sorry!