背景图片在iOS的Safari浏览器

Question

dissapearing

我工作的一个网站的移动版本，我模仿了iOS界面。在网站上有几个地方支持背景图像精灵（雪佛龙变成加载gif /灰度图标变成彩色图标）。

它完美的作品在桌面Safari浏览器，并在移动Safari浏览器参差不齐。图像有时会加载，而不是其他图像。图标会加载，但V形图标不会;他们加载在我的iPhone上，但不加载我的iPad，反之亦然。

我得到的调试控制台没有错误。这里的HTML和CSS：

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;} 

HTML：

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

我还发现，如果我通过多任务栏退出Safari并重新启动应用程序的所有背景图片返回，但是简单地清除缓存没有任何影响。

Answer 1

我昨天经历了一个相关的问题 - 我有垂直菜单在当前所选页面的菜单项有背景“斑点”的图形，以它的左侧。这适用于所有浏览器。然后，我使用“a：hover”将相同的背景图像添加到菜单中。这适用于所有浏览器，但移动/ iOS Safari。当我在iPad上使用菜单时，blob-graphic会以一些看似随机的间隔完全消失，除非我更新服务器上的图像和html文件，否则永远不会再回来。 （清除Safari缓存不起作用）。

这是我的猜测，为什么它会发生，我如何解决它......

的：在触摸屏设备，如iPad/iPhone的悬停行为坏了（因为你不能真正悬停在触摸屏上）。因此，使用悬停的效果似乎是，浏览器认为与悬停相关的图像是多余的，因此不会缓存它。然而，当下一页载入悬停图像的页面时，服务器的请求将检测到图像文件未被更改，因此认为无需从服务器检索它（因此尝试使用本地缓存副本，我假设，不存在（或至少不正确）。这会导致图像消失（页面上的所有副本都会消失）。

因此，如果您为悬停项目的背景和当前页面菜单图像（或页面上的任何其他图像）使用相同的物理图像文件，则当浏览器决定时，这两个/全部将会有效消失使用其（不存在的）缓存版本。

一种解决方案是有两个相同的图像文件，并使用一个悬停，在菜单项，另一个用于其他地方是必需的。那么移动Safari放弃与悬停相关联的移动设备并不重要（因为这些设备没有翻转效果），但它不会影响与任何其他菜单项关联的图形（例如，标记当前页面或其他）。

你可以让我知道是否能解决问题了吗？尽管经过数小时的搜索，我仍找不到有关这个特定bug的任何信息垂直双图像，然后再试一次：

Answer 2

它可能不是消失本身，而是两倍远滑下图像，你打算在Retina显示屏，一拉： enhancing image quality for iphone 4 from 72ppi to 326ppi

简单测试。由于iPhone 4处理背景图像的烦人方式，您很可能会看到您想要显示的1/2尺寸版本。