Imágenes de background desapareciendo en iOS Safari

Estoy trabajando en una versión mobile de un sitio y estoy emulando la interfaz de iOS. Hay algunos lugares en el sitio donde hay sprites de image de background de apoyo (el galón se convierte en el icono de carga de gif / escala de grises se convierte en icono de color).

Funciona a la perfección en Safari de escritorio, y es irregular en el Safari mobile. Las imágenes se cargarán algunas veces, no otras; los icons se cargarán, pero los cheurones no; Cargan en mi iPhone pero no en mi iPad y viceversa.

No recibo errores en la console de debugging. Aquí está el HTML y el CSS:

CSS:

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

HTML:

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

También encontré que si salgo de Safari a través de la barra de tareas múltiples y reinicio la aplicación, todas las imágenes de background regresan, sin embargo, simplemente borrar la caching no tiene ningún efecto.

Ayer experimenté un problema relacionado: tengo un menu vertical en el que el elemento del menu de la página seleccionada actualmente tiene un gráfico de background "blob" a la izquierda. Esto funciona bien en todos los browseres. Luego agregué la misma image de background que un rollover al menu, usando "a: hover". Esto funciona bien en todos los browseres, pero Safari para dispositivos mobilees / iOS. Cuando uso el menu en el iPad, el gráfico de blob desaparece por completo en un intervalo aparentemente aleatorio y nunca vuelve a less que actualice los files de image y html en el server. (Limpiar el caching de Safari no tiene efecto).

Esta es mi suposition de por qué sucede y cómo lo resolví …

El comportamiento del hover en los dispositivos con pantalla táctil, como el iPad / iPhone, está roto (porque no se puede pasar al modo de pantalla táctil). Por lo tanto, el efecto de utilizar un hover parece ser que el browser cree que la image asociada con el hover es networkingundante y, por lo tanto, no lo almacena en caching. Sin embargo, cuando una página con la image emergente se cargue a continuación, la request al server detectará que el file de image no se ha alterado y, por lo tanto, considera innecesario recuperarlo (del server) y, por lo tanto, intenta usar el copy caching local que, presumo, no existe (o al less no correctamente). Esto hace que la image desaparezca (todas las copys de la página desaparecen).

Por lo tanto, si usa el mismo file de image física para el background del elemento emergente y para la image del menu actual (o cualquier otra image de la página), ambos desaparecerán cuando el browser decida usar su ( inexistente) versión en caching.

Una solución es tener dos files de image idénticos, y usar uno para el elemento de menu flotante, y el otro para cualquier otro lugar que sea necesario. Entonces, no importa si mobile-Safari descarta el asociado con el hover (ya que no hay efecto de rollover en esos dispositivos), pero no afectará el gráfico asociado con ningún otro elemento del menu (por ejemplo, para marcar el actual página o lo que sea).

¿Puedes hacérmelo saber si eso resuelve tu problema? No pude encontrar nada sobre este error particular a pesar de las horas de búsqueda.

Probablemente no esté desapareciendo por sí mismo, sino que se desliza dos veces más abajo en la image que lo previsto en las pantallas Retina, a la: mejora de la calidad de image para el iPhone 4 de 72ppi a 326ppi

Prueba simple: doble la image verticalmente e intente nuevamente. Lo más probable es que veas una versión de tamaño medio de lo que pretendías aparecer allí, debido a la manera molesta del iPhone 4 de manejar imágenes de background.