2012-09-24 47 views
7

在ios5上,網站加載正常,看起來正確。因爲ios6我的網站的一部分,使用PNG圖像作爲其背景開始在iPad上呈現,但隨後背景變成黑色沒有明顯的原因(注意所有其他部分保持正確的顏色)。iPad/ios6不能渲染PNG背景圖片

代碼:

<section id="showcase"> 
    <section class="container"> 
    <img src="images/usp.jpg" alt="USP Screen" id="screen"> 

    <h2>title</h2>  

    <p>the text.</p> 

    <p>The text.</p> 
    </section></section> 

CSS:

#showcase   { background: url(../images/showcasebg.png) repeat-x #ededed; height: 600px; position: relative; top: 87px; } 
#showcase h2  { float: left; max-width: 422px; font-family: 'Lobster', cursive; font-size: 36px; margin-top: 20px; } 
#showcase p   { float: left; max-width: 422px; margin-top: 20px; } 
+0

我們可以有一個鏈接到您的網站?也許別的東西是錯的。 – Kyle

+0

不幸的是目前不可能,我希望有人可能會有類似的問題,因爲升級到ios6並可能找到答案。 – John

回答

1

我不知道這是否有直接的關係,但我昨晚做了一個類似的問題。我使用的是圖像的相對URL,發現iOS6的圖像路徑中的空間編碼爲%2520,而不是%20。這對我來說是一個問題,因爲我正在模擬器上的應用程序的Web視圖中查看圖像資源,所以模擬器提供的資源路徑中有空格。這不是設備上的問題,路徑中沒有空格。

我發現新的遠程檢查器(這裏提到:http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers)在確定發生了什麼事情時非常有用。

0

類似的問題在這裏。我網站(http://paulcremoux.com/en/trabajo/)的工作部分下的所有頁面都有很長的png。通常圖像在完成之前停止加載;其他時間他們加載,然後排序崩潰。 (你必須看看幾頁,因爲它看起來可能在第一時間工作。)

只發生在ios6上。

0

我們有類似的問題。

我們剛剛在PhotoShop中打開PNG並重新保存,之後顯示正常。我們沒有改變顏色配置文件或類似的東西 - 只需打開它,將所有設置保持不變,然後再次保存,然後就可以了。

我們網站上有許多PNG背景,但只有兩個特定的PNG沒有正確顯示。所以我們認爲也許這兩個人特別是在他們第一次創建時就被保存了一些小故障或什麼的。

誰知道。 聳肩

0

剛剛遇到同樣的問題,在iOS6 Safari下。出現黑色的repeat-x .PNG背景圖像。在沉重的時間壓力下,我將它保存爲.JPG並解決了渲染問題。

+0

不是一個真正的答案... –

+1

它不是一個答案?設備具有不同的功能。這是一個解決方案,不是嗎? – Kir

0

什麼工作對我來說是不是都是一樣的:

  • 它的工作通過消除隔行
  • 有些圖片我刪除了一些圖像的交錯,但隨後不得不刪除透明度,以及和這似乎以解決問題
  • 我試圖弄亂的寬度,但我不認爲這是任一。

只是我的經驗

3

我已經在我們的網站之一碰上這個問題爲好。我有一個使用背景PNG圖像漸變的移動網站,它在iOS6(Chrome和Safari應用程序)上顯示爲黑條。

我容易地固定它們通過重新保存用於網絡中的圖像以

  • 至少10px的
  • 保存爲非隔行的PNG

這立即解決了我的問題。

+0

iOS足夠智能支持1px寬的圖像。我懷疑精度是潛在的問題 - 也許加上小寬度? – Zenexer

+0

只是將圖像保存爲非隔行PNG對我來說工作正常 – mixable

0

只是有一個問題與此相同,重新保存.png隔行掃描解決了問題。

1

我剛剛在網絡服務器上遇到了這個問題。解決方案是將PNG從8位整數精度改爲32位。顯然,iOS無法正確處理8位數據;我不知道16位。我認爲,由於圖像複雜度低(簡單的漸變),Photoshop可能會自動完成此操作。它很容易修復GIMP:Image -> Precision -> 32-bit integer

+0

注意:圖像是/不是交錯的,並且/是一個像素寬。 – Zenexer

1

改變我的IMG的大小似乎工作,但一些奇怪的問題發生時,縮放...最終,對我來說最好的解決方案是它保存圖像爲JPG格式。