Basic example: hide the buttons when VR mode is entered (on iOS)

[cvan]

No description provided.

[jsantell]

@cvan could you explain the context or details here? I don't understand

[cvan]

In the Basic example, there are three buttons shown:

• Fullscreen
• VR (WebVR/Mobile only)
• Reset

iOS (i.e., specifically WebKit) lacks support for the Fullscreen API. So, upon you entering "VR mode," the page enters faux-Fullscreen mode. When this happens, the three buttons remain overlayed above the VR scene's <canvas>:


This is just a matter for the Basic example. Ideally, though it's not guaranteed, everything except the <canvas> and the UI icons (i.e., the back arrow + settings) injected by the Polyfill become hidden when VR mode is entered. This could be solved by creating a <div> that is positioned (position: fixed) behind the <canvas> such that the non-VR content is not visible.

A different solution that's less than ideal would be to set display: none on all other elements, but that would make too many assumptions about what content looks like.

[jsantell]

Fixed via #261