Leaving the tab doesn't pause the timeline when calling timeline.pause on blur event

juliangarnier / anime

JavaScript animation engine

https://animejs.com

MIT License

50.45k stars 3.69k forks source link

Leaving the tab doesn't pause the timeline when calling timeline.pause on blur event #721

Open sachaandre opened 4 years ago

sachaandre commented 4 years ago

Describe the bug As the title says : Leaving the tab doesn't pause the timeline when calling timeline.pause() on blur event

To Reproduce I've made a js fiddle here to reproduce the bug : https://jsfiddle.net/mjh70dsa/27/

Expected behavior When I'm leaving the tab, the method timeline.pause() is triggered.

Desktop (please complete the following information):

OS: Windows 10
Browser : tested on Chrome v.85 / Edge v.85

Thanks in advance ;) !

sachaandre commented 4 years ago

Addendum : The timeline.pause is fired when the focus is lost, when i click for exemple on the volume bar of windows. The bug seems to be specific when I'm leaving the current tab

SiddharthSham commented 4 years ago

I'm unable to reproduce the bug on Chrome v85 / Windows 10. But a few points to note:

To observe tab visibility, there exists the Page Visibility API. https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
Anime internally uses requestAnimationFrame to run the animations. According to the spec, the callbacks will not fire if the page is not visible. So you shouldn't have to observe page visibility at all.

juliangarnier commented 4 years ago

I think #701 might fix this.

sachaandre commented 3 years ago

Hello @juliangarnier The PR totally fixed what i was looking for, thanks a lot !