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

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

Related

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

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.

window.scroll and scrollTo not working on iOS

I have a simple javascript that works perfectly on Mac and PC platforms, but stubbornly refuse to scroll on any iOS device.
function scrollWin(ctx) {window.scroll((XSobject Map_zoom_x) - Xwindow/2, (YSobject * Map_zoom_y) - Ywindow/2);}
Does anyone have any ideas how I can get this function to work on iOS devices? The rest of the scripting plots a map and this final step should scroll the window to the location on the map, so it is pretty essential. However, any iOS device ignores it and shows the map at the origin.
I have tried embedding it in a setTimeout but that doesn't help either. window.scroll does the same thing.
Many thanks for any pointers for this. Anatole

Galaxy s3 breaks responsive layout

This is the site I'm developing: http://www.syndicatetx.com/
This site displays correctly on iPhone, and 4 other android devices I tested but on my galaxy s3 it appears to remove the css class for the logo.
Problem:
logo doesn't appear on s3
"Welcome to the Syndicate Where Old Jazz Comes Alive Open May 2013" Doesn't appear. The weird thing is. The text is there! just not visible.
(You can copy and paste the text in the mobile browser)
If you scroll to bottom and then scroll up real quick the logo loads for 1 second then disappears.
https://www.dropbox.com/s/zod5eo9dh7tupr3/2013-05-06%2010.08.31.png
If I use chrome or firefox on s3 everything looks perfect.
If I use dolphin (with jetpack) it's perfect.
If I use dolphin (without jetpack) same as screenshot.
I realize I need to get into mobile debugging but as of right now everything I saw for mobile debugging was for chrome and firefox which displays the page correctly so doesn't really help.
I would just leave this as a comment but don't have high enough rep yet...
I had trouble with S3 before because of its extremely high resolution in comparison to other phones. I see that you are using 480, 750, 800px to identify devices. Just be aware that the high resolution of that phone 1280 x 720.

Android browser : getting size of viewport

I am creating a overlay for websites which will access on mobile, In iPhone i'm getting visual viewport size by window.innerWidth and layout viewport size by document.documentElement.clientWidth in iPhone it is working perfectly but in android(2.2, 2.3.3) default browsers it is not giving a proper visual viewport size, and this size is not getting changed when I zoomed in or zoomed out.
so which js property do I need to use for getting proper visual viewport size, when I zoom in or zoom out.
This option is supported starting from WebKit version 534.13.
So only Android 3 browsers and above will supply visual viewport size, as lower Android versions are using WebKit 533.1.
Android stock browser 4.0.3 and 4.1.2 looks like same issue. It seems it doesn't work properly for these browsers. It doesn't work even in chrome.
Here is working example.

Cannot click on SWF when small size in Mac OSX

I have this website here http://www.innovie.com/morgan
If I use PC, I can drag and change volume on top left just fine. But if I use Mac OSX, either Safari or Firefox, I cannot drag the volume in the Flash, although I can see the mouse turn into pointer. Can someone help on why?
Where is the SWF: h**p://www.innovie.com/morgan/sound.swf
Not sure how to help -- it works for me on Safari 4, Flash version 10,0,22,87.
What happens when you try to drag? Just no effect? What browser and flash version?

Categories

Resources