Setinterval Being Paused on Scroll

Question

I am having an odd bug solely with Vivaldi browser.

I am using a setinterval() (every 100ms) to reveal elements on scroll, however when I start scrolling on my MacBook Pro...the setinterval stops firing and doesn't resume until the scrolling has stopped.

The result is that elements that fade in on the setinterval are not fading in until the user actually stops scrolling.To make it even more strange, this behavior stops after about 10 seconds on the page.

Was curious if this was any sort of known issue or if there was a fix?

Answer 1

This is a vast simplification, but most likely you observe the following behaviour ¹.

When you call setTimeout / setInterval you put the function in the event queue to be executed after X ms earliest.

However, the browser might have more important work to process on top of the stack such as painting UI. In this case, the setInterval callback would not be processed until the higher priority work has been processed.

How to mitigate the problem? Try using requestAnimationFrame instead to do work.

¹ Corrections to this post are welcome.