search

jeromeetienne / AR.js

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

(REACT) <canvas> element isnt the correct height when outside of FullScreen Mode or "VR Mode" #543

Closed JustinStoddard closed 5 years ago

JustinStoddard commented 5 years ago

Describe the bug When I'm not in full screen mode the default yellow box in the starter code isn't showing up as expected. I think this is the reason. <canvas class="a-canvas" data-aframe-canvas="true" width="2102" height="0"></canvas> For some reason the height of the canvas element has defaulted to 0. But when I enter full screen mode through the VR goggles button it changes to: <canvas class="a-canvas" data-aframe-canvas="true" width="2399" height="1799"></canvas>

To Reproduce Visit "https://www.thisjustin.tech/webar" in chrome, then inspect the VR Mode button. Then navigate to the elements tab inside your DevTools and find the element. There you can see the inline styles. Test what it looks like in Full Screen and Not in Full screen to see what i'm talking about. Then if your curious navigate out of fullscreen mode, remove the "position: absolute" css tag from the element while holding up a "Hiro" marker to the camera. You'll see the yellow box float down the screen.

Expected behavior To behave as it does on the codepen demo. https://codepen.io/nicolocarpignoli/pen/vMBgob

Additional context If you would like to see my Repo please visit "https://github.com/JustinStoddard/justin-s-com" I am using React v16.8.0 and a Semantic-UI-React v0.82.3, maybe the Styled Component Library is messing with the height? Anyway, I've been scratching my head around this for a couple hours. So any help helps. Good luck!

nicolocarpignoli commented 5 years ago

better continue the discussion in the previous thread. Copy and paste this here: https://github.com/jeromeetienne/AR.js/issues/537 thanks (also, I've answered you :) )