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.
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'm developing a phonegap application for both iOs and Android platform.
I'm using AppFramework by Intel (ex. jqMobi) and it works like a charm in iOs, it works good also on android, the only thing is that the scrolling is not working in Android 2.3.6 and I can't figure out why. I don't know if it works in most recent version of Android on real device, it's not working there too in the emulator.
Thanks in advance for any suggestion...
On Android 2.3.5 & 2.3.6, JQM's header and footer scroll with document and then reposition (back to top and bottom) after scrolling has stopped. This happens when header and footer are set to data-position="fixed".
It appears that these versions of android have buggy CSS implementations of {position:fixed;} and therefore JQM's behavior appears erratic when compared to other adjacent Android versions.
I developed an application for android using jquery mobile and phonegap.
I deployed the app to my device over usb. The performance of the app ist really bad, especially while scrolling a longer list.
The strange thing is: The whole app runs smooth if i just open up the browser on my phone and access the index.html directly. Same technology, same content. I do not use the phonegap native api or anything similar.
Tested with phonegap 1.5.0 and 1.7.0rc1, jquery mobile 1.1.0 on android 4.0.2.
Any ideas?
On honeycomb (3.0), Ice cream (4.0) and posterior devices, you can boost performance by adding the following in the < Application ... > tag:
android:hardwareAccelerated="true"
You could set the minSdk to 8 (Android 2.2) for compatibility and the targetSdk to 15 (Android 4.0) and that would make hardware acceleration work when its available on the device only.
I believe that with this flag the performance of my apps is equal to running them in the browser, so I guess its because the browser was coded with hardware acceleration :)
I had a similar problem: a page with a longer list of "medium complex" themed divs. The browser of HTC phone had no problems in displaying. But within the phonegap app rendering failed completely. I saw a kind of WSOD, which disappeared only after touching the display. After touching, the page was displayed correct.
The problem was not in place, when I shortened the div-list to one or two div-elements or when I reduced the sub elements within the divs and reduced the render effort caused by the css complexity.
The white screen looked like, if the whole body was invisible, since only the documents background-color was displayed (I added a light pink for this). So I guess, the rendering was the problem after reading this thread
I tried the various proposals I found in this thread to make the app work without the "WSOD". But nothing worked. Some of them made the app displaying really worse.
Finally, after a whole day of searching, I made it. I set within the tag (not the tag) of my AndroidManifest
<application android:hardwareAccelerated="false" ...
Now the app behaves in the same fast way as my webbrowser. Seems like, if hardware acceleration is not always the best feature...
My versions:
phonegap 3.5.0, Android 4.0.3, jQuery v2.1.0, HTC Sense 3.6
Found an answer here: http://groups.google.com/group/phonegap/browse_thread/thread/94da1cf881abe995/6d4f7aea7aeba523?lnk=gst&q=performance
There is probably a difference between the native browser and the webview in terms of javascript performance.
If you can confirm the browser performs better (that it's not something suboptimal in your code frustrating one but not the other), you could consider deploying as an html5 offline application so that you will actually run in the browser.
We bumped into performance issues while scrolling the same amount of list items with jquery mobile. The performance was so poor (we didn't even try in PhoneGap environment) that we rewrote the app using iScroll library... now the app scrolls really smoothly.
If you are at the beginning of the development, you could try to change the UI library.
After this situation we deploy our apps to test devices quite often to manage performance issues in time... this became a "policy" :)
After I have compiled and deployed the demo application to my Samsung Galaxy S II I noticed that the Sample PhoneGap App which comes with PhoneGap was not very responsive when pressing buttons and scrolling.
I also made a little app using PhoneGap and jQuery Mobile, with 4 buttons everything was ok, but when I added more than 7 and my viewport needed to be scrolled, scrolling become to be very slow, the more buttons/widgets I had the slower the srolling was.
Is this a bug specific to my mobile device or it is just how PhoneGap works:
The fact that PhoneGap apps feel slow on my phone including the demo?
EDIT:
The same PhoneGap app served by an HTTP server from my laptop and launched in the standard Android browser works very smoothly
Try setting your targetSdkVersion higher. Changing mine from "8" (i.e. Android 2.2) to "14" (Android 4.0) dramatically improved PhoneGap performance on phones running newer versions of Android. Most likely this enables certain performance-enhancing features such as hardware graphics acceleration.
For more info see my other answer about this here: https://stackoverflow.com/a/12397768/233370
Since PhoneGap and the frameworks that is used with it (JQM,Sencha Touch etc) are just working in a WebKit browser they can be slow if there's too much to render.
There's actually no bug with your device or etc.It's just that PhoneGap and the frameworks are not so good if you want fast response and so on.You can try your app in other devices and can observe that they behave the same.
I had the same Problems, after Update to Android 4.0.4 my Phonegap (Cordova 2.0.0) & Sencha Touch 2 - APP was very very slow.
But after I insert
super.appView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
the APP works fine, as before the update.
http://developer.android.com/guide/topics/graphics/hardware-accel.html
For improved performance you may not need Phonegap.
If what you need is quick cross platform styling but fast native components try a tool like nativecss.com It keeps the styling in CSS, but uses native components for everything else - so no HTML rendering delays or clunky animations.
Working on a mobile web application, I have found that some Android devices are rendering CSS differently than others. The detail on the site renders perfectly on every desktop browser I have tried on Windows & Mac, on iPhone, on every Android SDK Emulator I have tried, and even BlackBerry. While some Android devices render it perfectly, about half do not - and these "misrender" it in consistent ways. (For example, it looks great in a Galaxy, but is offset when using a G2.)
Aside from purchasing every single Android device on the market, is there any way to test CSS across all the devices available?
Thanks in advance!
In fact: you can use the emulator to replicate CSS differences. I didn't try enough variations.