code:

a.icon.good2 {
	background: #215387 url(test-sprite@2x.png) 4px -6px / 40px 82px no-repeat;
	}

Note: Including the size in the background property is not supported in older browsers. See example 2 below for a more backwards compatible solution.

Issue:

The W3C spec for the background shorthand property specifies that when declared without a size property it initializes size to ‘background-size: auto auto;’. Previously there was quirk with WebKit where if size was omitted it just didn’t initialize the size property for the background. This allowed for a previously declared background-size declaration to remain intact, displaying the image at its proper size. This quirk has since been removed and the latest release of WebKit now follows the W3C spec.

Bad code

a.icon {
	background-size: 40px 82px;
	}
a.icon.bad {
	background: #215387 url(test-sprite@2x.png) 4px -6px no-repeat;
	}

Produces

Solution

1. Add size to the background short-hand property and eliminate the background-size property

Code

a.icon.good2 {
     background: #215387 url(test-sprite@2x.png) 4px -6px / 40px 82px no-repeat;
}

Produces

2. If you must resize a background-image via a background-size property declare background size after the background property so it isn’t overridden.

Code

a.icon.good {
	background: #215387 url(test-sprite@2x.png) 4px -6px no-repeat;
	}
a.icon.good {
	background-size: 40px 82px;
	}

Produces

References:

http://www.w3.org/TR/css3-background/#the-background
https://bugs.webkit.org/show_bug.cgi?id=97761
http://lists.w3.org/Archives/Public/www-style/2012Oct/0112.html
http://caniuse.com/#search=background-size

We have been busy making the BlackBerry® 10 browser one of the most advanced browsers on the market with class leading HTML5, CSS3, and WebGL support. However, even if you build one of the greatest browsers to ever hit the mobile web, you still need content providers to serve up a rich mobile experience. To help ensure our users receive high quality content, we have changed our user agent string. It’s not an ideal solution, but feature detection and responsive design have not yet become the norm among web designers, and we needed an interim solution.

Thus, without further ado, I introduce to you the new and improved BlackBerry user agent string!

Mozilla/5.0 (BB10; <Device Model>) AppleWebKit/<WebKit Version> (KHTML, like Gecko) Version/<BB Version #> Mobile Safari/<WebKit Version>

Explained

1. Mozilla/5.0 Mostly customary, historically used to indicate Mozilla compatible browser
2. BB10 The primary identifier of a BlackBerry 10 device
3. <Device Family> Device product family name
4. AppleWebKit/<WebKit Version> The WebKit Version number
5. KHTML, like Gecko The engine WebKit originated from
6. Version/<BB Version #> The software version number
7. Mobile Indicates the device is mobile; it may have a small physical screen and potentially limited bandwidth
8. Safari/<WebKit Version> Mostly customary, historically used to indicate Safari-compatible browser

What has changed?

1. Many websites are filtering on the word “BlackBerry” and providing our very capable browser with the most basic of mobile web pages, while rich content is being pushed to our competitors. To avoid this pitfall, we removed the word “BlackBerry” from our user agent and replaced it with “BB10”. This change will require web administrators to add this new identifier to their user agent detecting scripts
2. We cleaned up the user agent string by removing both the locale (e.g. “en-US”) and the strong encryption indicator (e.g. “U”) [don’t worry, we still support strong encryption]

Suggested Identification Pattern

• BlackBerry10 Smartphone: 'BB10' + 'Mobile'

Example: htaccess file

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} BB10.+Mobile 
RewriteRule ^$    http://www.example.com/mobile [L]

So there you have it, our updated BlackBerry 10 user agent string!