A-frame Random page reloads/refresh

[CallumMitchellRV]

I've been working on a VR game within A-Frame. When I started testing on devices (iPhone 7/iPhone 7 Plus running Safari, and Samsung Galaxy S6 running Chrome), I began to notice the page would randomly refresh, which is an issue for us, as it restarts the game.

This is happening with the demos on their website, as well as our self-hosted game.

Has anyone experienced this issue, and/or know what the issue or the solution is?

• A-Frame Version: 0.5.0
• Platform / Device: iPhone 7/7 Plus
• Reproducible Code Snippet or URL: [https://aframe.io/examples/hello-metaverse/]

[dmarcos]

It restarts randomly, while interacting with the scene, in 2D mode, in VR mode?

[CallumMitchellRV]

It hasn't happened once on a desktop (am I correct in saying that 2D is desktop). We've only had this page refresh issue on devices, most regularly in VR mode. I believed it was an issue on our end, until we started testing on a-frame.io examples, and it happened there too.

[dmarcos]

I can't reproduce on my iPhone 7 Plus with https://aframe.io/examples/hello-metaverse/.
@CallumMitchellRV Do you think we can close this? Is it still a problem for you?

[CallumMitchellRV]

We're still very much having this issue on multiple devices on a-frame's own projects. Admittedly, on the iPhone 7 Plus it's less regular than the iPhone 7, sometimes 5 minutes, sometimes 1 minutes. I recommend leaving your phone in the VR mode until it happens. If you notice that i's no longer in VR mode, a page refresh has occurred.

I'm very much in need of a solution or an explanation to this, so I'm not prepared to close this issue at this point.

[dmarcos]

@CallumMitchellRV Can you try with master branch and see if it still reproduces?

[jonnyharper]

Hi, I'm having the same issue. On the basic Hello Web VR example, if I just leave my iPhone sat for a few minutes, I'm booted out of VR mode and the attached logs in console.

[CallumMitchellRV]

So after getting an unminified version of the files, I have found out that there is an issue with the iOSWakeLock function (lines 80195 and 80195 of aframe-master.js from v0.5.0).

function iOSWakeLock() {
	var timer = null;

	this.request = function() {
		if (!timer) {
			timer = setInterval(function() {
				window.location = window.location;
				setTimeout(window.stop, 0);
			}, 30000);
		}
	}

	this.release = function() {
		if (timer) {
			clearInterval(timer);
			timer = null;
		}
	}
}

From what I can gather, it is a function to keep the screen from timing out. This has not worked for us and we've had to change phone settings to accomplish this. This also explains why it only occurs on iOS. If anyone can shed any light on why this might be happening that would be great. In the meantime, I've commented this out.

[cvan]

@CallumMitchellRV thanks for filing this issue. sorry that it's fallen through the cracks. what are your screen-lock settings on your iPhone? the stock, default settings?

[CallumMitchellRV]

@cvan All of the iPhones with this issue had their display settings set to never auto-lock.

[klaasman]

I'm experiencing the same issue, after every 30s without interaction in VR-mode, the app will reload itself. I'm on iOS 11.0 with the screen-lock setting on 5 minutes.

[prayash]

Hi 👋 ,

I am currently running into this issue on iPhone 6S & X (Safari) and my MacBook Pro Retina 2015 and 2016 (on Google Chrome w/ the iPhone simulator). The refresh happens exactly 30 seconds after instantiating the app. Steps to reproduce:

• Visit https://aframe.io/examples/hello-metaverse/ via Google Chrome on your computer.
• Go into Inspect Mode, and toggle mobile simulator. Pick any iPhone model.
• Click VR Mode button on bottom right and switch to landscape mode.
• Now wait for 30 seconds, and you will see that the page refreshes.

Same thing is happening when I load my app up in VR mode on my iPhone. The page refreshes exactly after 30 seconds, and there are no logs at the moment it happens to tell me why it's happening.

Note that the app does NOT refresh if I pull it up on an Android (in VR mode), so this is definitely a problem with iOS.

After digging around, this line seems to be the culprit. It sets the window.location to /, which is what was refreshing the page.

I've commented that line out in my production bundle, but I still don't really understand the issue with it. I know it's related to keeping the phone awake, but there has to be another way of doing that instead of directly setting window.location.

If anyone can shed some light on this, it would be much appreciated! :)

[jsantell]

I've uncommonly heard similar reports on using WebVR polyfill and it comes down to the wakelock.

[moyashipan]

Hi, I'm having the same issue on iOS 11.

However, NoSleep.js that similar to wakelock.js of A-frame is successfully working. 😃
I compared NoSleep.js and wakelock.js, then found the following difference.

NoSleep.js

It plays the video for iOS 11.
https://github.com/richtr/NoSleep.js/blob/01b379d53cd89c15052b7ab92da319812b7c823b/src/index.js#L3-L7

wakelock.js of A-frame

It does NOT play the video for iOS 11.

aframe/vendor/wakelock/wakelock.js

Lines 67 to 68 in 619d57c

	if (userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) {
	return iOSWakeLock;

Does anyone think that replacing with NoSleep.js is a good idea?

[moyashipan]

NoSleep.js has already been included in A-frame 0.8.2 through webvr-polyfill.
I noticed it now. 😅

I can see its successful work on my iPhone7 (iOS 11), and think this issue has been solved. 👍 👍

[dmarcos]

Cool @moyashipan. Thanks for verifying