Announcing jQuery Mobile 1.1.1
The jQuery Mobile team is excited to announce the release of version 1.1.1.
This is our first maintenance release for version 1.1 and it’s chock full of bug fixes and improvements based on community feedback and testing.
The most notable changes in this release are speedier page transitions and tap responsiveness on longer pages, smoother transitions in Cordova, and more polished form elements.
Alongside this release, the ThemeRoller Mobile tool has been updated to make it easy to upgrade existing themes to 1.1.1. A new downloader builder tool is now released as a public alpha and allows you to build custom versions of jQuery Mobile 1.1.1 that only include the modules you need.
Slow tap response when clicking items in large listview on mobile devices (Issue #4340) – Slow response times and crashing when clicking on a list item (or any navigation element) far down a long page was due to the browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance so we added another condition to say that if you’re either coming FROM or going TO a page where the scroll position is 3x the height of the device’s screen, skip the transition (set it to none). This scroll position breakpoint is configurable via the new
White flash/flicker when transitiong between 2 web pages in Phonegap/Cordova (Issue #4024) – We now add a class while the TO page is being set up for show (block display, focus, scrolling, setting height) called
ui-page-pre-in. This class sets the opacity of the TO page to 0 during this momentary process, which at least in my testing, prevents fixed toolbars and pages from flickering during transitions when fixed toolbars are used in a web app mode in iOS (not Safari, but native webview). Fade transition is particularly improved.
Fix for slide flickering within a ios app webview (i.e. Phonegap container) (Also related to issue #4024). Thanks alexksso!
Standardize widths for all buttons and form elements (Issues: #3284, #3983, #3301, #3922, #1998, #2804, #3684, #4252, #4098, #3979, #4263, #4489) – Jasper (uGoMobi) did an incredibly detailed sweep through all the elements to ensure that each widget is as close to the the same width as possible given the constraints of CSS. In addition to width normalization, we tweaked things like count bubble position, button margin consistency, padding for icon-only buttons in controlgroup, etc.
Improvements to link styling to avoid conflicts with generic link styles (Issue #3455) – If a:visited, a:hover are defined, they will break jquery mobile buttons because of the specificity of the styles. Up to now, we only set link styles within a theme swatch but since setting link styles globally is fairly common, this defensive addition will help avoid conflicts with user styles or popular tools like the HTML5 Boilerplate
Select: Custom menu with a placeholder highlights first element although it’s not selected (Issue #4061) – Fixed by filtering placeholders out of the list of selected items Button: Adjusted ui-focus to improve the focus style for grouped buttons
Fixed headers: UpdatePagePadding() and default ui-page-header causes slight jump (Issue #4412) – Adjusted default top/bottom padding for page with fixed toolbars.
Added box-sizing border-box to grid blocks so they don’t break when padding or border is set (note: not supported by IE7)
Grid: Adjustments to grid-b and -c to fix BB Storm and Curve issues. Adjustments to percentages for older browsers (wrapping still occured on IE7 on certain screen widths).
Navbar: Mini styling for navbar with adjusted padding top and bottom. Set right border on last button when not in toolbar. Navbar: Button sub-pixel problem (Issue #3341) – Filled gap caused by subpixel problem with negative margin.
Navbar: Items wrapping in IE7 BB5 (Issue #2270 and #2159) Adjusted grid blocks percentage width to prevent wrapping on older browsers and set it back for modern browsers, including minor adjustment to fix BB5 issue.
Slide Transition with Fixed Header in App visual artifacts (Issue #4418) – We now include padding for the fixed toolbars in the 100% height of
Form: form hijacking not respecting allowCrossDomainPages (Issue #2234) – check external urls against the cross domain pages setting
Button: Text is now prevented from being selected – for a cleaner interaction, this can be tweaked via CSS if needed
Navigation: When the initial page has a dialogHashKey, navigation breaks after link-click followed by “Back” (Issue #4423) – Handle corner case where first visited page has a dialog hash key
Init: Proceed to hashchange handler when the initial hash contains a path – This covers cases where the hash is a path
Navigation: Bad URLs with hashes are not gracefully handled (Issue #4119) – Added regex test to see if hash is valid and if a page with that ID exists, if not load the first page.
Listview: data-mini=”true” attribute should be ignored (Issue #4114) – Mini listviews are both difficult to tap accurately and have too many complex styles to support at two sizes
Input buttons of type=image not rendering properly (Issue #3423) – Fixed by setting
-webkit-appearance: none; on this type. This input type is no longer auto-enhanced unless a data-role=”button” is added in the markup.
Can not disable ‘push state’ plugin when jQM loaded via require.js (Issue #4136) – We now call
init when both
domready have happened instead of just
Dialog: navigation incorrect if certain flags are set (Issue #4320) – if hash manipulation is off, the dialog hash key is not added when the dialog appears, and the dialog’s close button does a
window.history.back() by default. This causes the browser to go back to the page before the one that launched the dialog. Now when
hashListeningEnabled is not set, use urlHistory to go back from the dialog
Listviews: Button+data-iconpos=”notext” formatting issue (Issue #4227) – Style tweaks for better layout
Dialog: Double click on dialog close btn cause double back (Issue #3387) – Prevent the click-handler for “Close” acting twice
CollapsibleSet widget removes ui-corner-x classes from the whole DOM (Issue #4062) – removed add() function which queries the whole DOM. Thanks @MauriceG
- Uncompressed: jquery.mobile-1.1.1.js (useful for debugging)
- Minified and Gzipped: jquery.mobile-1.1.1.min.js (24KB, ready to deploy)
- Uncompressed with Default theme: jquery.mobile-1.1.1.css (useful for debugging)
- Minified and Gzipped with Default theme: jquery.mobile-1.1.1.min.css (7KB, ready to deploy)
- Uncompressed structure without a theme: jquery.mobile-1.1.1.css (useful for theme development)
- Minified and Gzipped structure without a theme: jquery.mobile-1.1.1.min.css (6KB, ready to deploy)
Copy-and-Paste Snippet for CDN-hosted files (recommended):
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
ZIP File: If you want to host the files yourself you can download a zip of all the files:
Fork jQuery Mobile on GitHub https://github.com/jquery/jquery-mobile
A Word of Thanks
We’d like to thank the community contributors and supporters for their incredible dedication to the project by contributing issue reports, bug fixes and support.
Our corporate sponsors have been essential to our success and donating developer time on an ongoing basis is a really useful way to help the project. We’d like to thank Adobe for donating multiple developers (John Bender, Tyler Benziger, Kin Blas), Filament Group (Todd Parker, Scott Jehl, Mat Marquis), Jive Software (Ghislain Seguin), Microsoft (Sergey Grebnov), and RIM (Jason Scott), uGoMobi (Jasper DeGroot), Intel (Gabriel Schulhof) as well as individual contributions from Anne-Gaelle Colom and Maurice Gottlieb who generously donate long-term development support to the project.
We’d like to thank all our corporate sponsors for contributing generously to the project to support this release. We’d also like to thank the various companies and individuals who have donated test devices to the project. Please donate devices to our test lab to help us better support all platforms.
If you are interested in giving back to the project, please contact Todd Parker.
Platform support in 1.1.1
jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.
We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.
A-grade – Full enhanced experience with Ajax-based animated page transitions.
- Apple iOS 3.2-5.1 – Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
- Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
- Android 3.1 (Honeycomb) – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
- Android 4.0 (ICS) – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
- Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
- Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
- Blackberry 7 – Tested on BlackBerry® Torch 9810
- Blackberry Playbook (1.0-2.0) – Tested on PlayBook
- Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
- Palm WebOS 3.0 – Tested on HP TouchPad
- Firefox Mobile (10 Beta) – Tested on Android 2.3 device
- Chrome for Android (Beta) – Tested on Android 4.0 device
- Skyfire 4.1 – Tested on Android 2.3 device
- Opera Mobile 11.5-12: Tested on Android 2.3
- Meego 1.2 – Tested on Nokia 950 and N9
- Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
- UC Browser – Tested on Android 2.3 device
- Kindle 3 and Fire – Tested on the built-in WebKit browser for each
- Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
- Chrome Desktop 11-19 – Tested on OS X 10.7 and Windows 7
- Safari Desktop 4-5 – Tested on OS X 10.7 and Windows 7
- Firefox Desktop 4-13 – Tested on OS X 10.7 and Windows 7
- Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
- Opera Desktop 10-12 – Tested on OS X 10.7 and Windows 7
B-grade – Enhanced experience except without Ajax navigation features.
- Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
- Opera Mini (5.0-6.5) – Tested on iOS 3.2/4.3 and Android 2.3
- Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)
C-grade – Basic, non-enhanced HTML experience that is still functional
- Blackberry 4.x – Tested on the Curve 8330
- Windows Mobile – Tested on the HTC Leo (WinMo 5.2)
- All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience