Fix UI in iOS

[borismus]

Some UI glitches in iOS.

• White background (around the eyes) should be black in VR mode
• Back button should be black, and much smaller
• Back button should work

cc: @toji

[cvan]

I noticed these other issues:

• The back button is too large on Android (not as large as on iOS). At least on my devices, the button obscures the top corner of the left viewport.
• The gear icon is noticeably larger on iOS than on Android.
• Clicking on the gear icon doesn't do anything on Android (or anywhere where the Fullscreen API is supported). When I exit VR, for a few milliseconds before it disappears, I can see that the Cardboard settings modal was behind the fullscreened canvas. On iOS the menu appears because WebKit doesn't support Fullscreen.

Not sure whether you want to cover all of those issues in this one or file separate ones. Let me know - I can do that.

[borismus]

Thanks for testing more. Are you using webvr-samples, or using the latest
polyfill? I thought I fixed the gear issue (your #3) but I don't think
@toji updated to latest polyfill yet.

On Wed, Mar 23, 2016 at 3:24 AM chris van wiemeersch <
notifications@github.com> wrote:

I noticed these other issues:

• The back button is too large on Android (not as large as on iOS). At
  least on my devices, the button obscures the top corner of the left
  viewport.
• The gear icon is noticeably larger on iOS than on Android.
• Clicking on the gear icon doesn't do anything on Android (or
  anywhere where the Fullscreen API is supported). When I exit VR, for a few
  milliseconds before it disappears, I can see that the Cardboard settings
  modal was behind the fullscreened canvas. On iOS the menu appears because
  WebKit doesn't support Fullscreen.

Not sure whether you want to cover all of those issues in this one or file
separate ones. Let me know - I can do that.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#46 (comment)

[cvan]

Latest polyfill

[borismus]

Things are looking a little bit better here: http://borismus.github.io/webvr-polyfill/examples/basic/. There's still a problem on iOS, which manifests when you exit VR mode. I'm not sure how to best fix it... Problem is the following:

When we go into VR mode, we redefine canvas.width and canvas.height using Object.defineProperty (https://github.com/borismus/webvr-polyfill/blob/master/src/cardboard-distorter.js#L238). When exiting VR mode, we restore canvas.width and canvas.height with its original values, which we capture using Object.getOwnPropertyDescriptor (https://github.com/borismus/webvr-polyfill/blob/master/src/cardboard-distorter.js#L68). However on iOS, these values never really get set back properly, so changing canvas.width/height values has no effect.

cc: @toji

[cvan]

I noticed the exact same thing; spent a few hours last night trying to fix but I was unsuccessful. maybe y'all have better luck.

[cvan]

Testing against examples/basic/, I noticed that the back button is smaller, but it's still visible within the left viewport. And the back button on iOS seems to make the screen turn black and rotating the phone back to portrait doesn't seem to resize things correctly.

[borismus]

@cvan Yes, that's because iOS fails to reset the redefined width & height properties. So far my workaround attempts have not succeeded and I'm open to suggestions.

[borismus]

Looks like the problem is that get and set are undefined on realCanvasWidth/Height. Furthermore, renderer.domElement.__lookupGetter__('width') doesn't work in Safari at all (same for setter).

A workaround could be to use a proxy wrapper to wrap around the Canvas element, but that seems really bad. Maybe there's a way to create a JS-based getter/setter that resets the underlying canvas element?

[cvan]

Can we instead assume that the canvas will be resized when the window gets resized and/or there's an orientation change? That way, we could just add event listeners. Thoughts?

[borismus]

Not as clean, since canvas might not be fullscreen by default. We should support canvas getting resized even when the window remains fixed.

[borismus]

Ok, fixed part of the problem by making a JS getter setter if getOwnPropertyDescriptor fails. But on iOS initial sizing is still wrong on requestPresent/exitPresent. 0d933e2

[cvan]

so far, I've seen Object.getOwnPropertyDescriptor always return the correct object. you saw otherwise? is this a known WebKit bug?

[borismus]

It returns an object but get/set are undefined.

[toji]

Spent a while researching this myself, and I'm not convinced the Width/height patch we're doing it feasible on Safari (iOS or OSX). So after giving it some thought I've got an alternate proposal:

We should keep doing what we're doing on Android, but on Safari we simply don't install the width/height patch and instead check the width and height on every submitFrame. If it differs from the last values we saw resize the false backbuffer to match (after rendering the current distortion frame.) The real backbuffer will also be resized, since that's the default width/height behavior. This means that if they set the size to larger than the physical screen res (to try and get a 1:1 pixel ratio post-distortion) the real backbuffer will be too large and downscale when rendered to the screen, wasting fill rate and somewhat defeating the purpose of trying for a 1:1 ratio in the first place. Fortunately most iOS don't seem as fillrate sensitive as their contemporary android devices, so it's more of a quality issue than a performance or correctness issue. At least the resize won't break when we exit VR mode at that point, though.

[borismus]

This is fixed, except for weird button sizing. I've worked around this for now, but the workaround is ugly and wrong: 17dc3c8. Logged a new bug to track it: #57