New to Kendo UI for Angular? Start a free 30-day trial

Notifications are Stacked Using SetInterval


ProductProgress® Kendo UI® for Angular Notification


If I toggle the Kendo UI for Angular Notification in setInterval and switch the browser tab, the notifications start to stack.


To improve the performance, most browsers set low priority execution to inactive tabs which can affect timers. When а tab gets inactive it pauses the requestAnimationFrame.


Choose one of the following solutions to avoid stacking the Notifications when switching tabs:

  • Disable the Notification animations.

  • Clear the interval according to the active state of the browser tab. То check the visibility state of the tab, use the generic visibilitychange event and the visibilityState property.

    public ngOnInit() {
        document.addEventListener('visibilitychange', () => {
            if (document.visibilityState === 'hidden') {
            } else {

The following example demonstrates the second approach in action.

View Source
Change Theme:

In this article

Not finding the help you need?