Aframe: Add hack to allow pseudo-fullscreen in Chrome and Firefox for iOS

Created on 23 Mar 2016 · 10Comments · Source: aframevr/aframe

Description:

WebKit does not support the Fullscreen API. In Safari for iOS, fullscreen can be emulated using <meta name="apple-mobile-web-app-capable" content="yes"> (which A-Frame already injects if meta[name="apple-mobile-web-app-capable"] doesn't already exist on the page).

Chrome and Firefox for iOS unfortunately do not support such a method of pseudo-fullscreen. In both browsers though, as you scroll down on a page, the chrome navbar disappears. But because we are preventDefault-ing on touchmove on the canvas and the html has position: fixed styles, this doesn't work. I have a WIP branch that sets iOS-only styles that adds a bunch of padding-bottom to the html element and then when the user swipes down, it works.

Calling window.scrollTo or setting document.body.scrollTop doesn't seem to work. I'll have to investigate that some more though. That'd be the "ideal hack."

feature request mobile

Source

cvan

👍4

All 10 comments

As stated above, Firefox for iOS (like Chrome for iOS) hides the chrome nav bar when a user scrolls down the page. Safari for iOS hides the chrome nav bar in landscape if <meta name="apple-mobile-web-app-capable" content="yes"> exists on the page. We should get Firefox for iOS to do the same pseudo-fullscreen behaviour if <meta name="mobile-web-app-capable" content="yes"> exists on the page (which is what Chrome 32-39 used before using the W3C manifest: https://developer.chrome.com/multidevice/android/installtohomescreen#fallback).

We should file a bug for Firefox for iOS to do this.

cvan on 23 Mar 2016

Cvan, have you published the WIP build that adds the padding to the bottom of the html? I'm having the same issue on a build that we are about to go public, and while not ideal, at least being able to "swipe" to remove the URL bar is better than the offset (low) stereoscopic rendering due to the URL bar

Drewwit on 24 Jan 2017

For those interested, the temp/crude solution as described is to create scrolling and that gets rid of address bar.

for example

var html = document.getElementsByTagName('HTML'); html[0].style.position = 'initial'; html[0].style.overflow = 'scroll'; var canvas = document.querySelector('.a-canvas'); canvas.style.top = '1000px';

renhyl on 6 Feb 2017

👍1

Is anything being done on this? It's quite a critical problem for us.

MagicIndustries on 28 Mar 2017

This issue can be fixed in A-Frame's dependency, webvr-polyfill. When this issue is properly addressed and fixed, this will also be fixed in A-Frame too: googlevr/webvr-polyfill#114

cvan on 28 Mar 2017

@cvan Unfortunately unless I'm reading it wrong that PR only seems to add support to what's already there for android webviews. We are trying to fix the full screen / urlbar issue on ios in safari and chrome (on iphone 5/SE, though i believe the reason chrome doesn't work is different to why safari doesn't work)

MagicIndustries on 28 Mar 2017

@MagicIndustries you can do "Add to Homescreen" on iOS. Do you have a URL of your site andcau explain the user flow and what you're expecting vs. encountering. On a related note, have you seen these comments?

https://github.com/aframevr/aframe/issues/316#issuecomment-209147896
https://github.com/aframevr/aframe/issues/316#issuecomment-212608703
https://github.com/aframevr/aframe/issues/316#issuecomment-219181039

cvan on 28 Mar 2017

@cvan Thanks for that - yeah we've already added that add to home screen component, and that works, we're just trying to find ways with less friction.

For anyone else coming across this, this is what we've found definitively:

IOS on iphone 5, 5S, SE

Chrome and Firefox and safari all refuse to hide their url bars / go full screen

IOS on iphone 6+

Chrome and Firefox still refuse to hide their url bars / go full screen
Safari works great and hides the url bars

Android on various

Chrome, Firefox and Samsung browsers work great and hide their url bars.

We've tried all the hacks - scrollTo, the hack mentioned in the @renhyl 's comment above, and everything else we could find online. There's currently no proper solution to this on iOS, other than to use the pin to homescreen option - whereupon full screen works just fine.

We also came across some weirdness implementing @renhyl 's code above as it would work to hide the scrollbars, but exiting VR was buggy and sometimes impossible. All in all it detracts from the user experience and we decided pinning was the least friction causing option.

Our app is in latest A-Frame, and ios versions were 9 and 10.

MagicIndustries on 28 Mar 2017

👍1

@ngokevin @cvan, I don't think @MagicIndustries should need to leverage the homescreen in this scenario unless this is a specific-to-iOS Chrome bug. I have a working demo in-browser with inline video + audio etc. fullscreen on iOS10 Safari and Android Chrome. It's very smooth without downloading to the homescreen.

My only issue at the moment is bulleted above -- iOS chrome does not get rid of the URL bar when going landscape or when going into VR mode.

This will cause the renderer to squash and look weird. I cannot recreate the issue using Chrome's simulator for iPhones, but it's consistent on the real hardware.

_Update: Confirmed with iOS 10, iPhone 6S on current iOS Chrome build using aframe.io examples. Not sure if I'm misunderstanding what Google considers 'fullscreen' but it seems like this should work https://developers.google.com/web/fundamentals/native-hardware/fullscreen/. Also can't confirm if this issue happens in Android Browser + Android Chrome but I don't think it does._

johnnyshankman on 10 Apr 2017

👍1

I'll add that even hacks that go fullscreen on the iphone 6/6s/7 will sometimes not work on the 6plus and 7plus. Because Apple treats the plus as some sort of super-mini iPad (it's like the worst of both worlds, I hope the iPhone8 acts like a phone, not like this).