Why does changing pointer events cause a very heavy recalculation of styles?

Question

JavaScript

I'm working on optimizing a smooth kinetic scrolling component written in vue.js. Oddly enough, the bottleneck was an optimization based on adding pointer-events: none during scrolling. It quite successfully copes with unwanted redrawing due to hover effects, but at the same time causes indecently heavy 'Recalculate Style' and 'Update Layer Tree', which take an average of 3ms on my 4770k and in general do not cause animation brakes, but how only it comes to testing on an old laptop, then there it is already far from 3 ms and the animation looks rather deplorable. I'm already thinking about using a simple overlay div instead of pointer-events. Is there a more elegant way to solve this problem?

Answer 1

What if we add a mousein event with capture=true and preventDefault? The div option will trigger the same operations with updating layers and recalculating styles.

Answer 2

Try using contain in conjunction with pointer-events. Perhaps this is what you need.