jQuery mobile is a framework build upload on jQuery and jQuery UI foundation, which is a unified, HTML5-based user interface system for all popular mobile device platforms. Now days jQuery becoming popular among mobile sites. In spite of bugs (couple of explained below) this should not put you off developing with the framework as no framework is 100% complete, it get improvements/enhancements on going with users feedback. One of the major factor why jQuery Mobile becoming popular is easy to learn, early adoption of jQuery mobile by mobile sites and a large range of online support, threads and documentation available. Almost all bugs we encountered are known to development team and they definitely will fix those in future releases.
Many of the bugs are unique to the older Android devices (like 2.2, 2.3), therefore with the recent news that Google Chrome is to become the standard browser on Android 4.0 and above means that, jQuery mobile will be more consistent and will offer gr8 performance across devices. Currently, mobile chrome is available through Android Market in Beta.
One interesting fact, was when I ran CSS3/HTML5 compatibility test on Android default browser I got approx 188 points whereas when ran on Chrome I got approx 300 points which means quite a lot improvement and support for new features introduces with CSS3/HTML5.
Link: http://www.google.com/intl/en/chrome/android/ (Supported on Android 4.0+)
Couple of Known Bugs
Transition is one of main feature which comes with jQuery Mobile. Which works very smooth on iOS devices but on Android devices they behave differently, very sluggish and not quite smooth as on iOS.
Secondary problem is very noticeable blinking on the target page, once the transition completed. This is a known bug, and although there are some touted css fixes around that certainly reduce the flickering they seem to result in other problems. Certainly, the blinking problem was still clearly noticeable on Android 2.2 and 2.3.3 even with these CSS based fixes.
The blinking wasn’t so bad in iOS, however was still evident in certain circumstances, therefore we decided to turn off the transitions across all platforms for the time being.
As this is a known bug we look forward to this being fixed in a future jQuery Mobile release.
Bug Id: https://github.com/jquery/jquery-mobile/issues/3217 (seems fixed in 1.1 release)
CSS suggested fix for flickering:
.ui-page {
-webkit-backface-visibility: hidden;
}
Another problem with the jQuery mobile and touch events is the time it takes to action a click event, this delay was most noticeable in Android, where it seemed tapping on a link would take an age to trigger, in some cases up to 3 seconds.
The crux of the problem is that the click event does not fire until a delay has passed, as the browser is allowing the chance for a second touch to make it a double click or for it to become a swipe gesture and so on.
The solution to this is to execute a conditional statement to test for native touch event support and then execute a ‘touchStart’ event (the mobile equivalent of mousedown) when this event is natively available. The ‘touchStart’ event fires immediately, just like mousedown. This results in a more responsive device interaction. The change significantly reduced the delay on iOS but less so on android, however there was still a marked improvement.
I like the helpful info you prdoive in your articles. Ia1a6ll bookmark your blog and check again here regularly. I’m quite certain Ia1a6ll learn plenty of new stuff right here! Good luck for the next!