a-canvas not always fullscreen in iOS Chrome

[tomegz]

Description:
Scene doesn't take up whole screen. Even if it does initially, it breaks after changing device's orientation. In Safari it works alright - i expierienced it only on Chrome iOS. Chrome version: 62.0.3202.70

• A-Frame Version: 0.5.0, i also expierenced it on my own demos with 0.7.0 version
• Platform / Device: iPad Air 2
• Reproducible Code Snippet or URL: https://aframe-gallery.glitch.me/

[tomegz]

I haven't dug into A-Frame's source code but it may be caused by fact that "orientationchange" event doesn't come with correct values at first (maybe just on iOS Chrome) - they update slightly after the event is emitted - hence it's resizing to wrong size. In my demos i have my own ui which resizes on "orientationchange" event - to prevent this from happening i would use something like this:

function orientationChanged() {
  const timeout = 120;
  return new window.Promise(function(resolve) {
    const go = (i, height0) => {
       window.innerHeight != height0 || i >= timeout ?
       resolve() :
       window.requestAnimationFrame(() => go(i + 1, height0));
      };
      go(0, window.innerHeight);
  });
}

And use it like this:

orientationChanged.then(function() { 
  resize();
});

[arturitu]

It seems that the cause is known webkit bug: https://bugs.webkit.org/show_bug.cgi?id=170595