jQuery Mobile 1.1.0 RC2 Released

Posted on by

jQuery Mobile 1.1.0 RC2 has finally arrived. Our philosophy in 1.1 was to really focus on making the current feature set we had as close to perfect as we could, without sacrificing compatibility. When we released RC1, we heard overwhelmingly positive feedback and really appreciate the support and testing from the community.

There were, however, a few things that cropped in in the RC that we decided as a team to address fully before releasing RC2, even if it took a bit of extra time. We appreciate your patience and hope that it was worth the wait. Try it now!

Demos & docs | Key changes | Download & CDN | Supported Platforms

KEY CHANGES

Fixed toolbars: Now with optional backwards-compatible polyfill

In 1.1, we’ve switched over to using position:fixed for our new fixed toolbars because there is now solid support in mobile browsers and this new approach bring true fixed toolbars with native scrolling. These new CSS position:fixed toolbars in 1.1 are supported by a majority of popular platforms: iOS5 (~75% of iOS devices), Android 2.2-4.x (~93% of all Android devices including the Nook and Kindle Fire), RIM Playbook and BB6-7, and all modern desktop browsers.

This new technical approach does mean that platforms that don’t support position:fixed, most notably iOS 4, now fall back to static positioning so they scroll with the page. For these devices, the new 1.1 approach is a bit of a setback compared to 1.0 where we dynamically re-positioned the toolbars into place each time the page scrolled.

We believe that the crisp divide in 1.1 where fixed toolbars either work perfectly or fall back to simply scrolling with the page is a smart approach. However, we heard from some people that that even though the older, dynamic re-positioning behavior wasn’t perfect, it was still something they wanted the option to use.

After a lot of consideration, we decided to hold off on moving forward with RC2 for a bit to give us time to figure out a way to accomodate people who wanted to slot in the 1.0-style fixed toolbars in when position:fixed isn’t supported. It took quite a bit of work (thanks Scott!), but we managed to re-work the 1.0 re-positioning script to work as an extension to the new 1.1 fixed toolbars for RC2. When this extension is added, it adds the 1.0-style fixed toolbars for browsers that don’t support position:fixed but can handle dynamic re-positioning.

To restore the 1.0-style toolbar polyfill, just include the CSS and JS files after your references to jQuery Mobile and Fixed toolbars will work similar to jQuery Mobile 1.0 in iOS 4.3 and other, older platforms.

 
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 
<link rel="stylesheet" href="jquery.mobile.fixedToolbar.polyfill.css">  
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 
<script src="jquery.mobile.fixedToolbar.polyfill.js"></script>

Since this polyfill adds a code weight and maintenance complexity for a fairly small slice of users, we’ve decided to release this polyfill as an optional extension that is outside the core jQuery Mobile library. This means that the codebase won’t be included as part of the jQuery Mobile package and won’t be maintained on the same schedule as the library. We’ll continue to refine this plugin in the Filament Group repo so help us test this and log issues in the tracker.

Transitions: Bringing back 1.0-style transitions for slide

Since we support such a wide range of devices, we need to manage scroll position because both the page you’re on and the page you’re animating to are sitting in the same viewport. This means that if you are scrolled down on a page and click a link, we need to scroll to the top of the window at some point in the transition sequence. The only way to avoid this scroll constraint is to use an overflow scrolling region for each page. This technical approach would mean dropping a significant portion of our supported platforms from the A- and B- grade experiences — a compromise we’re not willing to make. So we have to be a bit creative with how we design our transitions to work with the browser’s capabilities.

In 1.0, we had a synchronous transition sequence where we scrolled the page at the same time we were running the page transition animation. This looks great on short pages, but if you are scrolled pretty far down on a page and click a link, you’d see the current page fly by as the browser scrolled to the top of the window. This scroll jump made the experience feel a bit jumpy and we heard a lot of feedback that this needed a re-think.

In 1.1, we introduced an asynchronous transition sequence that was designed to visually hide this scroll jump. By first fading out the current page, then scrolling into position before starting the “in” transition, the jump was now invisible because we were essentially scrolling a blank page.  This fade effect is a clever way to embrace constraints to make the transitions feel smooth and in control regardless of page length.

In most transitions, the fade effect makes our transitions look a bit different, but we think it looks slick and in control. The reaction from the community on the new transitions has very positive overall and it’s clear that the new apporach is significantly better than the 1.0 experience.

However, the “slide” transition lost some of it’s mojo in 1.1 RC1 because the fade out we do before sliding in the new page definitely changes the effect. We heard that some folks wanted the option to still use the 1.0 style slide, despite the scroll jump, and were chatting in the forums about to how hack this back in.

Because the underlying sequence of events is completely different in 1.1, bringing back the 1.0 slide transition is not simply a matter of dropping in the 1.0 keyframe animation CSS. This was situation where we listened carefully to feedback and decided to re-think our plans in order to make 1.1 work well for everyone, even if it delayed our release a bit.

We’re happy to announce that there is now a way to define a transition handler sequence: sync (1.0-style) and async (1.1-style) when authoring a new transition. In RC2, the slide transition now uses the 1.0-style sync handler, and a new slidefade transition uses the 1.1-style async handler. This paves the way for users to port other 1.0 transitions into 1.1, or create their own custom transitions that can leverage either of the these handler types.

In 1.1, the default transition is now fade which works well across all platforms and is designed to be as fast and unobtrusive as possible. Slide and other, more intensive 3D transitions like flip, turn or flow can cause Android 3+ and slower devices to slow down and blink.

Android bugginess: Position fixed + selects = trouble

One of the things we’ve struggled with in jQuery mobile is the built-in Android browser. Not only is CSS support and animation performance less than ideal, there are a boatload of bizarre bugs that can even vary between manufacturers on the same Android version. Our job as a library is to smooth out and workaround browser issues, but it’s far from easy.

For example, after RC1 was released, we started hearing reports that our new fixed toolbars were completely breaking select menus on Android. Having an issue of this severity crop up at the RC stage was not good. We hadn’t seen this problem in earlier rounds of testing, but was now a very serious blocker issue.

After days of work by Mat, it became clear that Android 2.x’s built-in browser was very fragile, especially with select menus. It turns out that selects can stop working when various, seemingly unrelated, CSS properties are in play which is why we didn’t catch it earlier. Here’s are the Android CSS bugs we discovered and documented in this process:

Android 2.2/2.3’s implementation of position: fixed; can, in conjunction with seemingly unrelated styles and markup patterns, cause a number of strange issues—particularly in the case of position: absolute elements inside ofposition: fixed elements. These bizarre issues include—but are not limited to—the following:

  • Form elements elsewhere on the page—select menus in particular—can fail to respond to user interaction when an empty absolute positioned element is placed within a fixed position element. In rare cases—and specific to Android 2.2—this can cause entire pages to fail to respond to user interaction. This can seemingly be solved by adding any character to the absolute positioned element, including a non-breaking space, and in some cases even whitespace.
  • The above-described issue can also be triggered by an absolute positioned image inside of a fixed position element, but only when that image is using something other than its inherent dimensions. If a height or width is specified on the image using CSS, or the image src is invalid (thus having no inherent height and width), this issue can occur. If an image that is inherently, say, 50×50 pixels is placed in a fixed element and left at its inherent dimensions, this issue does not seem to occur.
  • When a position: fixed element appears anywhere on a page, most 2D CSS transforms will fail. Oddly, only translate transforms seem unaffected by this. Even more oddly, this issue is solved by setting a CSSopacity of .9 or below on the parent of the fixed element.
  • Combinations position: fixed and overflow properties are best avoided, as both have been known to cause unpredictable issues in older versions of Android OS.
  • Any element that triggers the on-screen keyboard, when placed inside a position: fixed element, will fail to respond to user input when using anything other than the default keyboard. This includes Swype, XT9 or, it seems, any input method apart from the standard non-predictive keyboard.

In our specific case, the first bullet point was the blocker we originally ran into in RC1. If we had a fixed header that contained a button and icon inside (both are absolutely positioned) anywhere on the page, it would cause all selects in the page to break. You could tap on the select, but the menu would fail to open. This is sort of like your TV going on the blink when your neighbor turns on their shower.

Unbelievably, the “fix” for broken selects was to add a space inside the icon span. That’s right. A space.

Needless to say, position:fixed is quirky in mobile browsers so although we did resolve this issue and the new fixed toolbars are now working great in Android, we’ll be keeping an eye on this for further shenanigans. Because of the quirkiness, we don’t recommend pushing your luck by using form elements (other than buttons and links) inside a fixed toolbar without doing a ton of testing.

Lastly, we’ve been collecting mobile browser bugs in a GitHub tracker to help developers at share their knowledge of browser bugs and potentially offer workarounds and support. We encourage you to add your own.

We now support 1.6.4 and 1.7.1 (but not 1.7.2 yet)

Since jQuery core 1.7.2 landed fairly recently, we need more time to fully test this with jQuery Mobile 1.1.0. We will add official support for 1.7.2 in a future maintenance release. Until then, 1.7.1 is your safest bet if you want to use a newer version of jQuery core. If you’re running 1.6.4, we still support that as well.

Tons of fixes and improvements: Help us test

While we were working through some of the very thorny issues above, we had the time to land a metric ton of fixes for RC2. These are obviously a lot of changes for an RC so we need a lot of help testing the latest release.

Here are the highlights since RC1:

iOS4 reports landscape when it’s in portrait (Issue 3707) – Removed the use of the landscape media query, and switched to using window.innerWidth/innerHeight w ith a threshold to determine if the device is currently in landscape mode. A threshold is necessary because on small form factors like the iPhone, the user can enable the developer console which takes up more vertical space, making the useable width of the browser window larger than the height.

Page transitions using “slide” don’t work after the first transition (Issue 3970) – Incorrect -webkit prefix in -moz “slide” transition keyframes. Thanks for the timely fix deAtog!

Collapsible sets now respect data-corners attribute (Issue 3814) – collapsible-set AND nav were inheriting rounded corners

Added button markup hoverDelay global config option – $.mobile.buttonMarkup.hoverDelay

Horizontal grouped buttons with icons spacing too tight (Issue 3966)- Thanks uGoMobi!

Multi Page Head and Footer (fixed) with tapToggle: false (Issue 3875) – check the data role to see if it’s a header or footer, not the class from the page sections plugin. This allows for a looser order of calling the page sections and fixedtoolbar plugins on an element, which is a small improvement

Remove .ui-btn class from list dividers – Previously, it was getting both button and bar, now just bar

Height of fixed footer in docs now matches that of the fixed header.

Fixed issue with iOS5 and possibly others not properly returning to the desired scroll location after a transition that uses 3D transforms.

Header/footer mini button styles in toolbars – Header/footer mini button styles cleaned up. Footer buttons are no longer subject to the same left/right button logic as headers. Default mini/inline styles can now be overridden by setting either attribute to “false”.

Fix checkbox radio to cope with input nested inside the label – We now support the implicit association via nesting in addition to using the for/ID pattern. Thanks jokeyrhyme!

Non-native disabled selects become native when enabled (Issue 3894) – disabled custom selects will now enhance

Blackberry – Fixed Position Toolbars Not Working (Issue 3829) – Native position:fixed support in BB5 and 6 is pretty slow/buggy so we had excluded these from seeing this CSS rule but we’ve reversed this decision and let BB do what it does even if it’s not ideal.

Added option for clear search button text – The text for the button used to clear the search input of text can be configured for all search inputs by binding to the mobileinit event and setting the $.mobile.textinput.prototype.options.clearSearchButtonText property to a string of your choosing. Thanks bjohn465!

Changing oritentation on ios5 re-enables zoom (Issue 3859) – user scaling/zoom would become re-enabled after an orientationchange, even if it was locked, such as on a fixed toolbars page. Also, this change addresses @toddparker’s point that the zoom plugin does not respect meta viewport tags that have user scaling disabled at the start – in those cases, the zoom api will still be defined, but the methods won’t do anything.. and $.mobile.zoom.enabled will begin and remain false.

Intermittent 1px gap above fixed headers on Android 2.2/2.3 (Issue 3528) – By the looks of it this may have been a vestigial style used as a clearfix

Radio buttons in a control group not visible/rendering correctly in IE7 when pageloads (Issue 3837) – Ensures that absolute positioned checkboxes and radios within controlgroups are visible in IE7

showPageLoadingMsg demo does not work for android 2.3.3 (Issue 3786) – switched to mobile screenheight helper

Improvements to getScreenHeight calculation – used during transitions, but it’s exposed on $.mobile as well. For a while, it’s been returning incorrect values in iOS, as it wasn’t taking into account the browser chrome’s footer height. window.innerHeight tends to return the value we need more consistently, but it’s not supported in older browsers so I’ve included the jQuery height call as a fallback too.

vclick events don’t have pageX/pageY defined on them (Issue 3815) – Modified createVirtualEvent() so that it uses the mouseHook properties if the original event type starts with “mouse” or “click”. The original regex was only looking for “mouse”.

Checkbox & radio regression on Playbook 2.x (Issue 3792)

Support data-mini=”true” on listviews, as well as individual items within a listview.

Support data-mini=”true” applied to individual radios/checkboxes, as well as containing controlgroups.

Issue with overriding data-icon in split listview (Issue 3775) – split list icons should prefer second link, list item, and then the whole list config

data-overlay-theme bug in 1.1 rc1 (Issue 3779) – use parent, given that getInheritedTheme mimics the closest() method.

Performance improvements for checkboxradio widget – thanks dmethvin!

Listview does not allow per-listitem data-icon for split lists (Issue 3747) – split list icons now respect data-icon on LIs

$(“a”).live(“click”) returns different values on desktop browsers and on iOS safari (Issue 3686) – Replaced vclick and click .bind by the equivalent document.addEventListener. This is to ensure that these handlers will be the first to run on vclick and click. As of jQuery 1.7 delegated event handlers are run before bound handlers. This change ensure that these handlers are run before the ones handled by jQuery.

Auto-add back btn issue on pages beyond first view (Issue 3553)

Dialog Header Border Artifact in Chrome 9 (Issue 3626) – Fixed by explicitly setting border: 0 for ui-dialog header to fix chrome rendering bug. Thanks jgable!

$.mobile.listview.prototype.options.inset = true; does not work for data-filter=true (Issue 3761) – listview filter inset now respects prototype options

activeBtn is not defined (Issue 3723)

ui-btn-right/left broken in footer (Issue 3749) – Added support for these classes in footers

Document size with fixed toolbars too tall (Issue 3694) – bottom: -1px; padding-bottom: 1px on fixed footer, pr…
…eviously used to hide 1px “jitter” seen in many browsers during scroll, was triggering scrollbars in some browsers.

Error when there is a fixed header and no footer (Issue 3675) – prevent adding to a non jquery object in fixedToolBar

Select element text overflow issue inside of listview on iOS (Issue 2647) – overflow: hidden on text inside select menus was being ignored on iPad Safari specifically.

White flash during transitions in 1.1 RC1 (Issue 3735) – check for “overlay” theme classes, as well as bar and body to cross fade through bg color instead of white

Search Input – Focus problem (Issue 1459) – Clicking on a search input’s “clear” button now returns focus to the search input.

Collapsible incorrectly adds top, bottom corner classes to all .ui-btn-inner elements – Thanks jasonicrane!

Fix for $.mobile.fallbackTransition.slideout = “none” not working – Thanks pavliy!

Label wrapping checkbox triggers DOM_HIERARCHY_ERR (Issue 3688) – revert to wrapAll for checkbox and radio

Grouped link button in a dialog shows wrong border (Issue 3697) – `.ui-corner-top`/`.ui-corner-bottom` are no longer incorectly applied to the first and last elements in a controlgroup within a dialog page.

Theme inherited correctly on collapsible headings/sets (Issue 3699)

Radio button does not function properly in RC1 (Issue 3670) – reverted prop to attr to resolve this issue

Button highlight breaks out of icon-only buttons (Issue 3613) — Inner highlight in buttons now corectly follow the border radius of the button.

Improve select with custom menu keyboard navigation (Issue 3568) – ensure $.mobile.focusClass is used on buttons on focus/blur, focusin and focusout.

Set focus on page, not H1 on pageshow (Issue 3659) – we no longer add a tabindex attribute to the H1, since we add one to the page itself, and that’s where we send focus on pageshow

Fix keyboard controls on custom selects, previously breaking in any custom select with a header/dividers.

Added support for data-role=”dialog” (Issue 3276) – When a dialog is the first “page”-type element in the DOM, jQM will enhance it, triggering dialog enhancements as usual for non-ajax environments. Updated the /docs/pages/dialog.html page’s role to date-role=”dialog” to demonstrate the change.

Please help us test!

We’re looking for help with testing this release so we can release a final build as soon as possible. Browse the docs or try out the 1.1.0RC2 in your projects, then report issues in the GitHub tracker. Be sure to specify the device, OS version, browser, steps to reproduce and include a simplified test case that uses the latest build (template here).

For RC2, we’re planning on not making any additional code changes unless a major issue crops up during testing. This should be the exact code we will ship in about a week as 1.1.0 final.

Download

CDN-Hosted JavaScript:

CDN-Hosted CSS:

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>

ZIP File:
If you want to host the files yourself you can download a zip of all the files:

Microsoft CDN hosted jQuery Mobile files:

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

Platform support in 1.1.0 RC2

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). 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.0 – Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), 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
  • Firebox 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: 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-17 – 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-9 – Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
  • Opera Desktop 10-11 – 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

17 thoughts on “jQuery Mobile 1.1.0 RC2 Released”

  9. Yugandhar Tikhe on said:

    Thanks Todd. Not sure whether to use for Android platform. Do you see any chances of getting bugs fix in near future for Android Platform?

  12. Nick R. on said:

    The ‘page not found’ loading message (which now is in the loader element thus center-middle finally *HURAY*) does not show a border! Just a 1 min. view over 😉