I have developed a web app with jQuery Mobile that works fine in most phones I've tested it on, but recently found out that on SonyEricsson Xperia the pages won't scroll!
Is there anyone here who has come across scrolling problems on any platform with jQuery Mobile apps and knows what causes it and possibly what to do about it?
If I download Opera Mobile browser on the Xperia it works fine, so it only seems to have to do with the default browser (which I don't know what it is, but I assume Google's stock browser...)
I had a similar problem when my JQM web application wouldnt scroll on Xperia.
Firstly I would recommend testing whether you can scroll over content on this page: http://jquerymobile.com/test/docs/lists/lists-performance.html
In my case I could scroll over the content provided via the link above, so I realised it was a local problem. After some research I found out that I had overflow:hidden property attached to my html,body via one of my css files.
Related
I made my photography website as cross platform as I could without making separate web pages. This is my webpage.
It validates ok in w3c, and works perfectly in Chrome and Firefox for Linux, and in Chrome, Dolphin and the default browser for Android. However, it goes crazy in Firefox for android phones: it zooms in a lot with no reason, and the formatting is totally wrong.
Of course this is a bug in Firefox since it is not consistent between platforms, but which is the culprit? How can this be avoided? I guess there's something that can be done in the big IMG at the beginning of the page to prevent this.
EDIT: Firefox for tablets works fine too.
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.
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.
I've got an issue that I'm trying to get to the bottom of and I can't seem to find an appropriate answer. Our mobile website - currently in test - uses a 3D Secure iframe.
Our tests have confirmed that where the iframe displays properly when using an Android phone (in-built webkit-based browser, Samsung Galaxy S II), it unfortunately does not for an iPhone (again, in-build webkit-based browser, Apple iPhone 4S). The iPhone simply does not display the iframe. I'm uncertain whether the iframe won't show or if it is merely positioned off-screen (but there are no CSS properties applied to either the iframe or parent that would affect its position/float/margins/padding).
Is there a major difference between two webkit-based browsers on different phones which would account for this? Has anyone suffered from the same issue? And if you can help, how do I try to solve it?
<iframe id="authenticationFrame" name="authenticationFrame" src="3d-secure-bit" height="400" width="330"></iframe>
Thanks,