Background fail - Chrome bug with background-size

Background-size is a great addition to CSS, but there appears to be a bug with it in the latest Chrome (29 at time of writing).

The background

I came across this issue whilst adding a logo for Retina (high density) screens. The idea behind Retina images is to create an image twice the size of the original. For example if the original size is 100px x 100px, then your Retina image size will be 200px x 200px. Adding our regular logo as a background image we would do something like this:

.logo {
    background: url(/images/bacon.png) no-repeat;
}

Then to target Retina displays we can use a media query:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo {
        background-size: 100px 100px;
        background: url(/images/bacon@2x.png) no-repeat;
    }
}

Here we are using our 200px x 200px image and sizing it to 100px x 100px. This gives us a nice sharp image on Retina displays.

So what's your beef?

Testing this in mobile safari worked as expected and also in Chrome (18) for Android. Then testing on a newer Android in Chrome (29), the Retina image was being used but background-size was not kicking in.

After much Googling and this excellent post from Chris Wharton, it's appears that a bug has been introduced to Chrome certainly after version 18.

The bug

If you put background-size before background Chrome seems to ignore it. But placing it after does the trick!

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo {
        background: url(/images/bacon@2x.png) no-repeat;
        background-size: 100px 100px;
    }
}

And all is good in the Retina world again.