[Solved] Distorted background images on iPhone6 ..but not iPhone6+ or iPad Air 2

[grimski]

I’ve just ‘finished’ a website which uses several background images on div’s throughout the page. So these textures displayed sharply on retina screens, I also created higher res versions of these images (@2) by doubling them in size and calling them in using a media query. My (reduced) CSS is below:

[MOD EDIT – Codedump Removed]

Now, the website displays fine on desktop (non-retina) and also on my iPad Air 2, but when I check it in Safari on my iPhone 6 all the background textures are mushy. The strange thing was when I checked the site on someones at work’s iPhone 6+, the background images were sharp just like on desktop (non-retina) and on the iPad!

Can anyone shed some light on this, is there something wrong with my media query? Sorry I can’t connect to my FTP at the moment to upload the files.

Thanks in advance!

[Beverleyh]

Were you on a 3G/4G data connection at the time? (ie, not wifi)

I know it happens on my iPhone 5S where I’m on sites at home, and connected to wifi, and all HD images look crispy, but then when I’m at work and NOT connected to wifi (running a lowly 3G data connection) the same site images load in fuzzy. Then I go home and try the same site again, refresh, and everything is back to crispy sharpness.

[Paulie_D]

I’d mark this as solved but not sure how?

Done

[Author]

Posts