Chrome iOS not using retina background-image

Question

I'm on an iPhone 5... I started updating my website, to use retina images. Everything works perfectly in Safari. For some reason, my background-image for the body isn't using it, and its super blurry. Any ideas? Is this a bug? This is what I have for the media query for retina displays:

body {
    background: 
        url(../images/logo.png) no-repeat,
        url(style/images/dark/bg5.jpg) 50% 0 no-repeat, 
        url(style/images/dark/bg5_repeater.png) repeat bottom;
    background-attachment: fixed;
    background-color:#09273e;
    color:#e4e4e4;
    background-position: 15px 10px, top, bottom;
}

@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

    body, #header {
        background: url(../images/dark/[email protected]) repeat;
        background-size: 70px 70px;
    }

}

Here is the link to the file and code line, on my bitbucket: http://bit.ly/Sxevfg

Here are some screenshots too between Safari and Chrome on iOS 7.1.1.

Thanks so much

Chrome background-image

Safari background-image

Just noticed the screenshots are pixelated when looking at this page, stackoverflow, on a mobile device LOL — jaminroe

Webveloper Webveloper · Accepted Answer · 2014-05-25T07:04:08

Chrome renders pages with Safari's engine (the only browser engine Apple allows on iOS), so this must be a difference between in-app Safari (UIWebView) and actual Safari.

But my answer is that you should not be implementing a retina tax. Are double-resolution images really worth doubling the user's mobile data usage, or doubling your page's load time?

(If work on the Network Information API continues, maybe we'll get media queries for bandwidth...)

Chrome iOS not using retina background-image

2 Answers