Horrible performance on Safari when game is out of viewport

[SantosR]

Hello,

I'm having performance issues, exclusive to Safari (desktop/iOS) whenever the game is outside of initial viewport (i.e., if the user has to scroll the page). If I move the game to the top, it works like a charm!

Anyone has had the same issue before? Apparently requestAnimationFrame calls have huge delays when content aren't initially visible (at the top of the page).


Thanks for your time.

[rich]

It's not just Safari, most browsers do this. If the rendered area isn't visible, or you're on another tab, then RAF is throttled in some cases, or outright stopped in others. The reasons are various: performance, battery life, etc. There's nothing you can do about it either.

[SantosR]

The thing is, it's still throttled even after scrolling down and getting in view. The only way to "fix" it is by having the content on screen the moment the page is loaded. And that's something I could only reproduce in Safari.

If the content is on screen the moment the page is loaded it works fine in Safari, otherwise it's stays throttled indefinitely.

[rich]

I can't replicate this. In Safari 9.1.1 OS X I created a page with a 4000px tall div, and then a Phaser game below it. When the game scrolled into view, it was running at normal speed.

[mattstyles]

Yeah, its a little strange, raf is a global thing so the browser doesn't really know that the callbacks it is invoking are attached to any particular node, it only throttles execution when it thinks no-one is using the page at all i.e. blurred, as in, not in focus (I guess, in theory, raf should be stopped on unfocussed tabs, but I suppose someone wanted to periodically check on the tab, dunno, it runs slow anyway).

So it shouldnt make any difference where you place any bits of your content.

[SantosR]

I've been making tests and I still couldn't reproduce the issue outside of ReadiumJS (yes, it's a game inside an ebook !). That might be the SDK's scrolling implementation messing up with Safari.

It works like a charm if it's in the top of the page (initially visible area), but if I need to scroll to see the content, it keeps throttled indefinitely as if Safari never takes into account that it's now on screen.