iOS Safari 中的背景图像消失答案

【问题标题】：Background images dissapearing in iOS SafariiOS Safari 中的背景图像消失
【发布时间】：2011-09-28 10:12:44
【问题描述】：

我正在开发网站的移动版本，并且正在模拟 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 并重新启动应用程序，所有背景图像都会返回，但简单地清除缓存没有任何影响。

【问题讨论】：

标签： iphone css ios mobile safari

【解决方案1】：

我昨天遇到了一个相关问题 - 我有一个垂直菜单，其中当前选定页面的菜单项在其左侧有一个背景“blob”图形。这适用于所有浏览器。然后，我使用“a:hover”将相同的背景图像添加到菜单中。这适用于除移动/iOS Safari 之外的所有浏览器。当我在 iPad 上使用菜单时，blob 图形会以某种看似随机的间隔完全消失，并且永远不会回来，除非我更新服务器上的图像和 html 文件。（清除 Safari 缓存无效）。

这是我对它发生的原因以及我如何解决它的猜测......

iPad/iPhone 等触摸屏设备上的 :hover 行为已损坏（因为您无法真正将鼠标悬停在触摸屏上）。所以使用悬停的效果似乎是浏览器认为与悬停关联的图像是多余的，因此不会缓存它。但是，当下次加载具有悬停图像的页面时，对服务器的请求将检测到图像文件没有被更改，因此认为没有必要（从服务器）检索它，因此尝试使用我假设不存在（或至少不正确）的本地缓存副本。这会导致图像消失（页面上的所有副本都消失）。

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

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

如果这能解决您的问题，您能告诉我吗？尽管搜索了数小时，但我还是找不到关于这个特定错误的任何信息。

【讨论】：

这真的很烦人，但这是真的。因此，当您使用后退按钮时，我的图像消失了。还有其他解决方法，即在触摸设备上通过 javascript 禁用 :hover。而且这个线程已经3年了，问题仍然存在。

【解决方案2】：

它本身可能并没有消失，而是在 Retina 显示器上向下滑动两倍的距离，a la： enhancing image quality for iphone 4 from 72ppi to 326ppi

简单测试：将图像垂直加倍，然后重试。由于 iPhone 4 处理背景图像的方式很烦人，因此您很可能会看到 1/2 大小的版本。

【讨论】：