Cesium entity animation did not pause as expected when the browser Tab was covered by other active Tabs

[honglzhu]

I have a CesiumJS application, which shows a CZML dataset of orbiting satellites (with clockViewModel.shouldAnimate=true;) My question is, when I create a new Tab in the same browser, so my CesiumJS app’s Tab gets hidden (or covered), I cannot make its animation to pause and then to resume orbiting again after re-active its Tab.

I have tried below code:

    visibilityChanged: function(visibility){
        if ('hidden' === visibility){
			viewer.clockViewModel.shouldAnimate = false;
            //viewer.animation.viewModel.pauseViewModel.command();
         } else if ('visible' === visibility){
			viewer.clockViewModel.shouldAnimate = true;
            //viewer.animation.viewModel.pauseViewModel.command();
		 }
    },

More info: I can only make the animation ‘pause’ to work (i.e., if I only have the IF code block shown above, but delete the ELSE IF block), the animation gets paused as expected when I bring the page on top again. But if I have both the IF and the ELSE IF blocks as given above, then when getting back to the App’s Tab, the satellites positions would be way ahead of the earlier locations. In other words, the ‘pause’ seems did not take effect the browser Tab was covered by other Tabs.