Take the 2-minute tour ×

I'm working on a mobile version of a site and I'm emulating the iOS interface. There's a few places on the site where there's supporting background image sprites (chevron turns into loading gif / greyscale icon turns into colored icon).

It works flawlessly in desktop Safari, and is spotty on mobile Safari. The images will load sometimes, not others; the icons will load but the chevrons won't; they load on my iPhone but not my iPad and vice versa.

I'm getting no errors in the Debug Console. Here's the HTML and CSS:


footer li a i {display:block; height:24px; width:24px; margin:0 auto;}    
footer li a i.foo {background:url(../images/sprite-jobs.png) 0px 0px no-repeat;}
footer li a:hover i.foo {background:url(../images/sprite-jobs.png) 0px -24px no-repeat;}


<li><a href="#link"><i class="foo"></i>Text</a></li>

I have also found that if I quit Safari via the multi-task bar and restart the app all background images return, however simply clearing the cache has no affect.

share|improve this question
add comment

2 Answers

It's probably not disappearing per se but sliding twice as far down the image as you intended on Retina displays, a la: enhancing image quality for iphone 4 from 72ppi to 326ppi

Simple test: Double the image vertically and try again. You'll most likely see a 1/2 size version of what you intended appearing there, because of the iPhone 4's annoying way of handling background images.

share|improve this answer
add comment

I experienced a related issue yesterday - I have vertical menu in which the currently selected page's menu item has a background "blob" graphic to the left of it. This works fine on all browsers. I then added the same background image as a rollover to the menu, using "a:hover". This works fine on all browsers but mobile/iOS Safari. When I use the menu on the iPad the blob-graphic completely disappears at some seemingly random interval and never comes back unless I update the image and html files on the server. (Clearing the Safari cache has no effect).

This is my guess as to why it happens and how I solved it...

The :hover behaviour on touch-screen devices such as the iPad/iPhone is broken (because you can't really hover on a touchscreen). So the effect of using a hover seems to be that the browser believes the image associated with the hover is redundant and therefore doesn't cache it. However when a page featuring the hover-image is next loaded, the request to the server will detect that the image-file has not been altered, and thus deem it unnecessary to retrieve it (from the server), and therefore try to use the local cached copy which, I am presuming, doesn't exist (or at least not correctly). This causes the image to disappear (all copies of it on the page vanish).

Thus if you use the same physical image-file for the background of the hover-item and for the current-page menu image (or any other image on the page), both/all will effectively disappear when the browser decides to use its (non-existant) cached version.

One solution is to have two identical image files, and use one for the hovered-over menu-item, and the other one for anywhere else it's required. Then it doesn't matter if mobile-Safari discards the one associated with the hover (as there is no rollover-effect on those devices), but it won't effect the graphic associated with any other menu items (e.g. to mark the current page or whatever).

Can you let me know if that solves your problem? I couldn't find anything about this particular bug despite hours of searching.

share|improve this answer
add comment

Your Answer


