Question

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

它在桌面Safari中完美运行，并且在移动Safari上很不稳定。图像有时会加载，而不会加载其他图像;图标会加载，但人形不会;它们加载到我的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

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

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

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

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

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

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

Answer 2

它本身可能并没有消失，而是像你想象的那样在Retina显示屏上滑动两倍，一个la： enhancing image quality for iphone 4 from 72ppi to 326ppi

简单测试：垂直加倍图像并重试。由于iPhone 4处理背景图像的烦人方式，你很可能会看到你想要出现的1/2尺寸版本。

背景图像在iOS Safari中消失

2 个答案: