iOS Safari 中的背景图像消失
我正在开发一个网站的移动版本，并且正在模拟 iOS 界面。网站上有几个地方支持背景图像精灵（V 形变成加载 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 并重新启动应用程序，所有背景图像都会返回，但是简单地清除缓存没有任何影响。
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:
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>
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我昨天遇到了一个相关问题 - 我有一个垂直菜单，其中当前所选页面的菜单项的左侧有一个背景“blob”图形。这在所有浏览器上都可以正常工作。然后，我使用“a:hover”将相同的背景图像作为鼠标悬停添加到菜单中。这在除移动/iOS Safari 之外的所有浏览器上都能正常工作。当我使用 iPad 上的菜单时，blob 图形会以某种看似随机的间隔完全消失，并且永远不会出现，除非我更新服务器上的图像和 html 文件。 （清除 Safari 缓存没有效果）。
这是我对为什么会发生这种情况以及如何解决它的猜测...
iPad/iPhone 等触摸屏设备上的 :hover 行为已被破坏（因为您无法真正将鼠标悬停在触摸屏上）。因此，使用悬停的效果似乎是浏览器认为与悬停相关的图像是多余的，因此不会缓存它。然而，当下次加载具有悬停图像的页面时，对服务器的请求将检测到图像文件尚未更改，因此认为没有必要（从服务器）检索它，因此尝试使用我认为本地缓存的副本不存在（或者至少不正确）。这会导致图像消失（页面上的所有副本都消失）。
因此，如果您对悬停项目的背景和当前页面菜单图像（或页面上的任何其他图像）使用相同的物理图像文件，则当浏览器决定使用其（不存在）缓存版本。
一种解决方案是拥有两个相同的图像文件，并将一个用于悬停的菜单项，另一个用于任何其他需要的地方。那么，移动 Safari 是否丢弃与悬停相关的菜单项（因为这些设备上没有翻转效果）并不重要，但它不会影响与任何其他菜单项相关的图形（例如，标记当前菜单项）。页或其他）。
您能让我知道这是否解决了您的问题吗？尽管进行了数小时的搜索，我还是找不到有关此特定错误的任何信息。
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.
它本身可能并没有消失，而是在图像上滑动的距离是您在视网膜显示屏上预期的两倍，a la：
将 iphone 4 的图像质量从 72ppi 提高到 326ppi
简单测试：将图像垂直加倍，然后重试。由于 iPhone 4 处理背景图像的烦人方式，您很可能会看到您想要的 1/2 尺寸版本出现在那里。
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.