Only half of the screen is present after changing mobile's orientation

[Lefortov]

The bug is present on iOS using Chrome browser, on other browsers it works well. When you rotate your phone so it's changing orientation the canvas is present only on the half of the screen, other part of the screen is empty.

• A-Frame Version: 0.7.1
• Platform / Device: IOS, Chrome browser

[jaydansand]

This also happens on iOS Safari (iOS 9, 10, and 11) when launched as a full-window app from a home screen bookmark.

Here was my half-baked patch to fix the home screen issue; probably a similar approach is necessary for Chrome. At least for the Safari issue, the problem was at the point of the orientationchange event, window.innerHeight and window.innerWidth (as returned by getCanvasSize() when the view is not embedded) were reporting incorrect (too small) values, but after the transition, they were correct - so I added a 100ms setTimeout workaround.

This is based on 0.6.1, but I could roll a pull request if desired against the current version if desired:

--- aframe-master.js
+++ aframe-master.js
@@ -48678,13 +48678,23 @@
                 var canvas = this.canvas;
                 var embedded = this.getAttribute('embedded') && ! this.is('vr-mode');
                 var size;
+                var self = this;
                 if (! camera || ! canvas || this.is('vr-mode') && isMobile) {
                   return;
                 }
-                size = getCanvasSize(canvas, embedded);
-                camera.aspect = size.width / size.height;
-                camera.updateProjectionMatrix();
-                this.renderer.setSize(size.width, size.height);
+                var setSize = function() {
+                  size = getCanvasSize(canvas, embedded);
+                  camera.aspect = size.width / size.height;
+                  camera.updateProjectionMatrix();
+                  self.renderer.setSize(size.width, size.height);
+                };
+                if (self.isIOS && navigator.standalone) {
+                  setTimeout(setSize, 100);
+                }
+                else {
+                  setSize();
+                }
               }, writable: window.debug
             },
             setupRenderer: {

Example screenshots using https://aframe.io/aframe/examples/boilerplate/panorama/ (the problem doesn't present when using the embedded version at https://aframe.io/examples/showcase/sky/). The black bar is my redaction. Notice that once you trigger it, it's always half-screen in both portrait and landscape orientations.

[jaydansand]

Yep, same issue, same fix. I've updated the patch and filed a pull request (#3232).

[sabbir420]

Yes. I also get the same issue on iOS and android both. Is there any way to solve this?