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.
Related
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.
I build an iOS app using Cordova and it renders as expected on any iOS device. Now I'm using the same framework jQuery for the Android version and when i run the Android simulator it renders completely different. As you can see from the screen shots. This is my first android app so I'm not sure if I should be coding differently. Any thoughts or suggestions are welcome. Thanks.
https://www.dropbox.com/s/daigevqmmhwttdc/iOS.png
https://www.dropbox.com/s/b9p9ewqee68ty8b/Android.png
It's impossible to have the completely same behavior on all devices with HTML.
They are not that much different really. Also users using Android may not expect the same look-and-feel as those using iOS and vice-versa. Do they really need to be identical?
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.
We have developed an application using Sencha Touch and PhoneGap which works flawlessly on iOS devices. It's now time to port the app to the Android OS, which in most cases works great, except when the app is run on a device running Android 2.1.
Images are not scaled properly in this case (they are much larger than they should be). It is likely that I am seeing an example of this bug:
http://code.google.com/p/android/issues/detail?id=5141
There is a work-around posted in the linked forum, but it does not seem to have any effect in my case.
If anybody has further suggestions they would be welcomed!