Using jSignature (https://github.com/willowsystems/jSignature) within a PhoneGap, JQuery Mobile application.
When trying to sign in the content div using the Samsung Galaxy S4 the drawn line is not displaying. The signature is there when I pull the data but is for some reason not displaying. Any ideas why this might be? It has been working on other devices such as Samsung Galaxy S3, iPhone, and iPad.
<script>
var signatureContentDiv = $("#signatureContentDiv");
signatureContentDiv.html("");
signatureContentDiv.jSignature();
</script>
<div id="signatureContentDiv"></div>
I have also just run into this. For me, the error appears on the Galaxy Note 2.0 while running Chrome. I tried changing to Firefox and it works properly. The same behavior is noted when trying the demo directly on jSignatures site. I would suggest checking against their site and seeing if your device works properly to eliminate your code being the issue.
Hopefully this will get fixed.
Additional Info: I have just determined that it seems to be based on the dimensions of the image. Anything over 66,000 pixels (such as 600x110) will cause the failure. This still seems to only happen on certain devices, all running the same version of Chrome.
Interesting that I wind up responding to the last thread I answered about this issue almost 2 years ago.
It seems the most recent update to Chrome on Android (V 43.0.2357.78) causes new failures to jSignature. If the page is in it's native size (no browser zooming), it works properly. If you zoom the screen, it fails. This is new behavior (on existing code). Other browsers seem to work properly.
Related
I am facing very weird issue. Working on mobile application using Ionic and Angularjs. Things are pretty good but all of a sudden side menu scrollbar become sluggish. It will be easy to pin point things but issue is only coming with Samsung S6 (Android 5.x). S4 it is good. Any other mobile with Android 5.X version it is good. iOS working great. Just specific mobile it is not good.
I am creating dynamic menu based on response, I tried to do it hard code way but nothing helps. Also cross check digest timing that is also in ms. So, I doubt that can be issue.
I can't even pin point the issue to solve it. As things are very much specific to this mobile.
Any idea to debug it or way I can get and/or provide more info.
Let me know if any further information is required.
PS: I tried fresh ionic application with side menu, there it is working good on S6.
I have an HTML page which is displayed correctly in all devices and all browser except the stock Android browser in Xperia Z.
On this particular device running Android 4.2.2, I am using jQuery v1.7.2, and using $('div').slideUp and $('div').slideDown methods only, and it results in text distortion (it is in English, so I suppose it is not related to any specific font), the text appears as horizontal lines as they would appear for a fraction of a second while sliding up/ down.
I have tried turning the debug mode ON by about:debug in the stock browser, and the javascript console shows no error/ warning messages.
I tried changing the user agent string to iPhone, and to my surprise, the text is rendered as expected.
I have searched for similar issue, and came across Android stock browser crashing, it points to jQuery bug where slideUp/ slideDown have problems in Android stock browser (please note that jQuery and Android versions are different in the reported bug).
My questions are:
Is this a known issue?
Has anyone faced similar problem before?
Is there a workaround to resolve it?
I'd really appreciate if anyone could point me in the right direction.
Here's the site that I'm working on:
http://www.montevista.dreamhosters.com/
You'll need Opera Mobile Emulator or an Android device (not all of them show this problem). The Samsung Galaxy III shows it as well I think.
Here's an un-minified version of the stylesheet:
http://www.montevista.dreamhosters.com/wp-content/themes/Monte-Vista/style-unminified.css
I'm pretty sure that this isn't a problem with the responsive-nav.js, but something to do with my own code. I'm using Skeleton grid.
Is there any testing tool that would allow me to view source on this? I've tried connecting Opera dragonfly but it ends up showing me what is being displayed in the browsers instead of what's in the emulator.
Me again, replying to my own question. I fixed it by switching to Slick Nav (http://slicknav.com/) instead of Responsive Nav.
My problem is described in the following.
I recently developed a Phonegap app (Android and Ios are the target platforms) and deployed it on the markets. My app mainly consists in an event list.
The list is obviously scrollable. The purpose is to give a native feeling experience to the users or at least something close to it. Actually, I would like to enable inertia for most users (everyone would be awesome!).
The app can’t be downloaded by android < 3.0 phones, so it doesn’t matter if the solution excludes android 2.X users. In addition, for the moment the app is not design for tablets so I don’t mind if the solution doesn’t works with android < 4.0.
I use the following CSS property on the scrollable div:
overflow: scroll;
-webkit-overflow-scrolling: touch;
On Ios, there is absolutely no problem. It is fast and inertial scrolling is enabled.
With Android, I'm still having problems with some phones. Here are my tests:
Nexus 5 (Android 4.4) : inertia Ok
Sony Ericsson (Android 4.0.4) : inertia Ok
Samsung galaxy Trend (android 4.0.4) : inertia Ok
Samsung Galaxy Note 3 - SM-N9005 (Android 4.3): No inertia
Samsung Galaxy S4 (Android 4.3): No inertia
I don’t’ use any JavaScript library for scrolling (for example Iscroll ect…) and I don't want to do so except if it is a really lightweight librairy. In fact, I have tried Iscroll and the result is unusable because it is too slow and jerky. By the way, the event list contains gradient, images, text, shadow ect…
I have done a lot of research on the internet. And now, I feel lost!
I even don’t know if the problem is related to:
The manufacturer layer
The Android version
The default browser on the phone (I think not because it appears
that Phonegap doesn’t use it)
The embedded PhoneGap webKit rendering engine
Deprecated CSS properties : see this article
Something else?
It is a bit weird because it works on 4.0.4 and 4.4 but not on 4.3… I start to think this is related to manufacturer…
Any help, solution or information about the above would be really appreciated.
Not sure if you have solved your problem yet, but I just came across this issue.
I was using Hammer.js to detect drags for the sidebar, within doing so, I called preventDefault() which affected scrolling inertia in the android default browser, but not chrome. Removing that call fixed the issue.
I had the same problem. I looked into it for quite some time and the only solution I know is using a scrolling library. The best one I found is Overthrow: http://filamentgroup.github.io/Overthrow/
Cool thing is that it uses native scrolling whenever it can and only reverts to javascript when needed. Even works for me on old Adroid devices, while keeping that native scrolling feeling on iOS.
We have programmed a site at: http://tcsdesignreno.com/zing-cards/ to be responsive. Whenever I check it in online responsive design test sites (such as: http://mattkersley.com/responsive/ or http://beta.screenqueri.es/) it looks fine but if I bring it up on my HTC Sensation, iPhone 5 or a Galaxy 3 it cuts off the right side of the screen. I have used the standard web browsers and chrome on the phones. I am not sure how to check the CSS on my phone to see what the problem is.
Does anyone have any suggestions on either how to fix the site or how to find the error from my phone?
You can debug Android's Chrome Browser from your computer; details at this link.