Resetting correct CSS size when exiting VR mode on mobile

[pindiespace]

The current polyfill example always sets the size of the canvas element to the window dimensions, and adjusts CSS size as described at https://github.com/borismus/webvr-polyfill/issues/98. Are there any examples where the CSS size of the canvas is not the same size as document.body (i.e. it is initially embedded in the DOM)?

I built an example using the most recent version of polyfill and libraries at http://plyojump.com/projects/webvr-feature-detector. You trigger VR via orientation to landscape on mobile. If you flip back and forth, you get the canvas correctly resizing itself back into the page DOM. But it only works on iOS,counterclockwise orientation only, is delicate to CSS changes, and requires clumsy logic in the window resizing function.

Clearly, I'm fighting a battle that must have a simpler solution. Is there a simpler way using one of the following?

1. renderer param
2. effect effect
3. polyfill parameter

If not, what is the best strategy for showing active scenes in the DOM, e.g. for a VR slideshow with elements blowing up? Finally, there's no way to do this, can the "return" arrow in VR optionally be pointed to a different window location?

[jsantell]

It's been awhile since this has been updated, and think it may no longer be an issue in >=0.10.0 and suspect it was related to the deprecated HMD displays, or the MouseKeyboardVRDisplay.

Anyways, I did make a sample of using magic window in WebVR with the underlying CardboardVRDisplay. That should get you the result you're looking for if I understand correctly. Please reopen if I misunderstand!