Html page in a WebView does not fire 'visibilitychange' event when user press home button (iOS 8)

Question

I have a html page using canvas drawing to render every frame. When the page shown in safari, if user press home button, the 'requestAnimationFrame' will not be invoked, and the animation on the page paused until user back to safari. But the same device, when the page shown in a third party native app's webView, when user press home button, seems that the app never stop invoke 'requestAnimationFrame', and when user back to the app, the app is stuck even crashed... So I try to invoke 'clearAnimationFrame' when user press home button to fix this problem. But I found that when user press home button, the page in the webView does not fire 'visibilitychange' event. The behaviour is different from safari. Then I tried 'blur', 'pagehide' event, but neither is working!

Who can tell me how to fix the problem or any hint will be very helpful. Thanks in advance!

BTW, the version of my mobile system is iOS 8.0.

Answer 1

The only way to hack this issue is that you need to implement the similar function by native code. What I mean is that if the RAF or visibilityChange doesn't work, you can still detect the leaving of webview such as pushing the home button. then using js-bridge to inform the JS a "native-visibilityChange" event. Our product is using this to fix the issue as you are saying in our Canvas game or other web app.