search

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.79k stars 2.22k forks source link

Rotating phone from landscape to portrait mode, Whitespace visible at the bottom of page. #412

Closed rvisharma closed 5 years ago

rvisharma commented 6 years ago

Do you want to request a feature or report a bug? Bug

What is the current behavior? I am using Aframe 0.8.2 and aframe-ar.js 1.6 version. Facing issues while switching from portrait to landscape mode:- White space at the bottom gets added on every rotation back to portrait from the landscape which shifts the camera view to the top. (iPhone 6 plus Safari with multiple tabs open).

If the current behavior is a bug, please provide the steps to reproduce.

  1. Open https://jeromeetienne.github.io/AR.js/aframe/examples/mobile-performance.html on iPhone (Prefered iPhone6 plus) in portrait mode and scan the marker. Make sure you have more than one tabs open on your safari browser.
  2. Switch to landscape mode.
  3. Turn phone back to portrait mode, Whitespace gets added at the bottom and camera view shifts to top. (Attached screen recording- https://drive.google.com/file/d/1mesE4eVo4kf8TSoivCg8stHcoE2zcCZw/view)

What is the expected behavior? No whitespace should get added at the bottom and camera screen should remain as is.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and Device Name aframe - version 0.8.2 aframe-arjs- version 1.6.0 iPhone (6Plus) Browser - Safari - (with multiple tabs open) Version - 11.4 and 11.4.1


hoktok commented 6 years ago

I had the same white space issue in portrait mode on iphone Safari iOS 11.4.1 (same since 11.1) and android 6-8 (samsung S8). But NOT on IOS ipad.

I open the site in portrait mode and iIt is visible from the beginning. Same problem in all versions of aframe.js 0.7, 0.8, 0.8.2, aframe-master downloaded September 14th, 2018. aframe-ar.js all versions since 28th January, 2018.

One more issue, maybe because of same reason: I also use the aframe cursor for locating objects with a-cursor inside a-camera. See the small ring in the middle of the screen. Luckily marker objects/content are not beeing compressed. Ar.js/aframe compresses the cursor on portrait mode (all ios/android/all devices, this one also on ipad)

aframe_arjs_whiteborder_ringcursor

Landscape works fine.

aframe_arjs_landscape_ok

**I just fixed it:

I was using the bulma framework before. I deleted all bulma modals in my html. Second I changed width and height for both body and html in my css to 100%. That did it for me. Hope, it works for you, too.**