I know I usually write more interesting stuff on here, but I’ve been developing a few commercial WordPress themes recently and came across a bug on the MacBook Pro Retina in the Google Chrome browser that I thought you should all know about.

This is for the latest build of Chrome as of 13th August 2012.

In summary

If you are setting a “background-size”, make sure you set it AFTER the image declaration otherwise Google Chrome will ignore it. Make sure you set it for every instance as well, do not try and set it via a shared selector.

The details

If you are using the following code in your media queries to serve retina graphics:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.element {
background-size: 20px 20px;
background-image: url(../img/img-2x.png);
}
}

This will work in all browsers APART from Google Chrome.

It needs to be in this format:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.element {
background-image: url(../img/img-2x.png);
background-size: 20px 20px
}
}

Also, if you think you can share the background-size attribute via a shared selector, you cannot. e.g.

.element.first {
background-image: url(../img/img-2x.png);
} 
.element.second {
background-image: url(../img/img-2x.png);
} 
.element {
background-size: 20px 20px
}

This will not work in Google Chrome, you need to put background-size with every instance e.g.

.element.first {
background-image: url(../img/img-2x.png);
background-size: 20px 20px
} 
.element.second {
background-image: url(../img/img-2x.png);
background-size: 20px 20px
}

If I was lucky enough to have a MacBook Pro Retina to test on I’d submit a bug report, unfortunately it was one of my theme customers that spotted the issue, which I fixed and got them to re-test.

If you are lucky enough to have a MBP Retina, please feel free to try the above out and submit a bug report with Google.

I also haven’t had time yet to see if this bug exists on standard Chrome on Mac and PC.

** UPDATE: I’ve now reported this bug to Google. **

http://code.google.com/p/chromium/issues/detail?id=142634