背景圖片在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尺寸版本。