AR.JS + AFrame : Problems with Samsung Internet Browser - 3D Model shows up out of place - javascript

I've been struggling to make this 3d model display at the right place on Samsung Internet browser.
Here's the link on Glitch:
https://juniper-evening-guilty.glitch.me
To reproduce the issue:
open the link above in Chrome's on android phone, then allow camera access and point the camera at below marker
https://i.stack.imgur.com/5cahN.png
Result: The 3d model will load up just fine, right above the marker.
Open the same link in Samsung Internet browser on android phon.
Result: you won't see the 3d model - in fact it's loaded up but is displayed out of place, and you need to move the camera very close to the marker before you will see only part of it.
Expected Result: 3d model shows up right above the Hiro when using Samsung Internet browser, like what we got with Chrome browser.

Related

SVG not showing in browsers on iOS (iphone, ipad)

On my site there is a block with a map that is made as a SVG sprite, if you hover over a point, the whole map becomes darker and only the selected object remains. Everything works fine on the desktop and android, but on IOS in Safari and Chrome it doesn't want to work it out (the map turns white).
Site link: http://lorri.beget.tech
Map example(image)

Three.js textures not rendering on mobile and weird brightness issue

So I made a project using Three.js and everything works how I want it to on desktop browsers, tested using chrome, and firefox. When I try to open the project on any mobile browser, safari, chrome, or IE, some objects are not rendered these objects have normal maps and textures which appear fine on desktop but are not rendered at all on mobile. In addition objects appear to be overly bright on mobile and sometimes flicker going from behind one another to in front of one another.
One user suggested adding this.image = image; to the three.js file at line 18420 but this did not solve the issue. Here is a link to the project here http://pixelpusher.ninja/Ocean%20World/OceanWorld.html. You can inspect the page to view the source code. Has anyone ran into problems like this on mobile before? Any help is appreciated. Thanks!

Google Map pinch not working on Microsoft Surface

Perform a pinch operation on the Google Maps Custom Controls, Pinch does not work.
How can I change the zoom of the map in a pinch?
Example
https://map-sample-dot-cp300demo1.appspot.com/sample/index.html
Environment
Chrome version 50.0.2661.102 m
Microsoft Windows 10 Version 1511(OS Build 10586.318)
The Google Maps JavaScript API has been designed to load quickly and work well on mobile devices. Mobile devices have smaller screen sizes than typical browsers on the desktop. As well, they often have particular behavior specific to those devices (such as "pinch-to-zoom"). For more information and sample code visit this link.
Try to follow the steps here in this discussion to work the pinch in Microsoft Surface.
Steps we Followed:
Launch the Win8.1 VDA on a Surface pro1 / HP Elite Pad in Windowed mode.
Open the IE browser within the session and open Google Maps .
Try to Pinch / Zoom the google Maps within the desktop session.
Also try to check this SO question for more information.

jSignature on Android device using Chrome doesn't work when zoomed

When I use Chrome on any mobile device the signature will only work if the page is displayed in default zoom. If I zoom in on the signature area it won't render correctly. It looks like the x and y coordinates are offset and the signature is drawn outside the visible area.
This issue can be reproduced on the jSignature demo site:
http://willowsystems.github.io/jSignature/#/demo/
Example devide: Samsung Galaxy S5 using Chrome version 46.0.2490.76
I have also tested on a Lenovo tablet with the same result in Chrome.
I'm wondering if anyone has a workaround/fix for this?
Thanks,
Per

PhoneGap: different behavior Simulator vs. Device

Very strange problem:
I've created a small HTML5 canvas game with box2dweb.js.
So far, all my work has been on desktop and today I've decided to move it to the iPhone (which usually consists of wrapping the app in a PhoneGap/Cordova application, change a few settings, and that's it.
The problem is, when I run the app on my desktop browsers (Chrome, Safari) as well as the iPhone and iPad simulators - everything works correctly - but when I actually deploy to my device (iPhone 4S) only some of the pictures show up. In fact, only the player sprite animation plays, and everything else (while still there physically) does not get drawn unless it doesn't have a specific animation (whether it's a sequence of images or just one image).
What seems even more strange, is that only the player entity is being drawn (with animation, too!) but all other entities that have animations are simply not drawn.
I've attached images to show the differences:
My question is - where do I even start debugging this? I tried running the index.html page without the cordova app on the iOS simulator so I could access the debug console, but there were no issues. How is this even possible? I was under the impression that if it worked as a web page, it should work as a PhoneGap app.
Alright, I've solved the problem. It was incredibly simple but hard to find. It's not even a PhoneGap problem:
The game has a level editor, and so it also has a saving/loading mechanism. While I specify all the images as './graphics/image.png', when a level gets deserialized it saves the loaded image's source, and not the original './graphics...' path. So the problem was that I was trying to load local files from my computer to my iPhone. I guess it was a path problem after all...

Categories

Resources