search

jeromeetienne / AR.js

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

Strange position on Android #299

Closed irislovely closed 6 years ago

irislovely commented 6 years ago

I've been struggling with this for one week.

On iPhone, everything is working perfectly. But on Android, the model always display far away from the marker, mostly on the top , nearly out of the phone screen.

Does anyone encounter this issue too?

sloumdrone commented 6 years ago

I have encountered this issue as well. We have not been able to solve the problem. Additionally the video element keeps getting made by ar-js as 3k x 1.5k....way larger than the available real-estate of the phone screens we are testing on, which overflows our whole page.

:-/

irislovely commented 6 years ago

Hi @sloumdrone , I fix it by myself: if your have this: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> Please remove this line. I don't have time to test which parameter cause it, but I remove the line and everything work well.

danburk commented 6 years ago

has anyone else resolved this? it is driving me insane.

fulbert81 commented 6 years ago

@danburk @irislovely 's solution works for me.

nicolocarpignoli commented 6 years ago

someone understood what is the cause of that? I have the same problem and don't have on my HTML the line @irislovely posted

manishbansal8843 commented 6 years ago

I was also facing this issue. But the position was strange for me on android as well as windows. For me, i found that arjs adds offset to the model position if there are any other html elements on the page like divs/buttons/text etc. The model and marker aligns perfectly only when there is no other element other than scene inside body.

qu1ckdry commented 6 years ago

I'm having this issue on android too. I'm trying to run arjs in a nuxt app which I guess is the problem as it runs fine within a simple html app. Does anyone have any more info on what specifically causes it? I've followed all the above suggestions

qu1ckdry commented 6 years ago

So here's a weird thing that I just discovered... If I force a window resize (either via code or rotating the phone) everything works...

qu1ckdry commented 6 years ago

Additional notes... I've found an alternative fix which is to replace this:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

with this:

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

Only tested on android and chrome.

nicolocarpignoli commented 6 years ago

This solution works. thanks!

ofedo commented 3 years ago

Additional notes... I've found an alternative fix which is to replace this:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

with this:

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

Only tested on android and chrome.

This only partially worked for me. It got rid of the zoom, but the video now had left offset. Screenshot_20201028-222246

I fixed this by calling window.scrollTo(0, 0); after arToolkitSource.onResize(); is called.

Issue reproduces for me after page refresh (weirdly enough, first page load is ok), for https://stemkoski.github.io/AR-Examples/hello-cube.html on Chrome 86.0.4240.110, Android 9 (Pixel 3)