2012-09-24 5 views
7

Su ios5 il sito Web si carica bene e sembra corretto.iPad/ios6 non rendering immagine di sfondo png

Dal iOS6 una sezione del mio sito che utilizza un'immagine PNG come sfondo inizia a rendere sul iPad, ma poi lo sfondo cambia solo a nero per nessun motivo apparente (di notare tutte le altre sezioni rimangono il colore corretto).

codice:

<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

Possiamo avere un collegamento al tuo sito? Forse qualcos'altro è sbagliato. – Kyle

+0

sfortunatamente non è possibile al momento, speravo che qualcun altro potesse aver avuto un problema simile da quando ho aggiornato a ios6 e avrei potuto trovare una risposta. – John

risposta

1

non sono sicuro se è direttamente collegata, ma ho avuto un problema simile la scorsa notte. Stavo usando un URL relativo per l'immagine e ho scoperto che iOS6 codificava spazi nel percorso dell'immagine come% 2520 anziché% 20. Questo è stato un problema per me perché stavo visualizzando una risorsa di immagine in una visualizzazione Web in un'app sul simulatore, quindi il percorso della risorsa fornita dal simulatore contiene degli spazi. Questo non è un problema sul dispositivo, dove non ci sono spazi nel percorso.

Ho trovato il nuovo ispettore remoto (menzionato qui: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers) molto utile nel determinare cosa stava succedendo.

0

Problema simile qui. Tutte le pagine sotto la sezione di lavoro del mio sito web (http://paulcremoux.com/en/trabajo/) hanno una lunga durata. Spesso le immagini smettono di caricarsi prima che siano complete; altre volte caricano e poi si bloccano. (Devi dare un'occhiata ad un paio di pagine perché potrebbe sembrare che funzioni bene all'inizio).

Succedendo solo su ios6.

0

Abbiamo avuto un problema simile.

Abbiamo appena aperto il file PNG in Photoshop e lo abbiamo nuovamente salvato, dopodiché è stato visualizzato correttamente. Non abbiamo modificato il profilo del colore o qualcosa del genere - l'ho aperto, abbiamo lasciato tutte le impostazioni uguali e lo abbiamo salvato di nuovo, quindi è andato tutto bene.

Abbiamo un numero di sfondi PNG sul nostro sito, ma solo due PNG particolari non venivano visualizzati correttamente. Quindi pensiamo che forse quei due in particolare sono stati salvati con glitch o qualcosa quando sono stati creati per la prima volta.

Chi lo sa. shrug

0

Appena sperimentato lo stesso problema, in iOS6 Safari. Un'immagine di sfondo repeat-x .PNG che appariva nera. Sotto forte pressione del tempo l'ho salvato come .JPG e ho risolto il problema del rendering.

+0

Non proprio una risposta ... –

+1

Come non è una risposta? I dispositivi hanno capacità diverse. È una soluzione, no? – Kir

0

Quello che ha funzionato per me non era la stessa per tutti:

  • Alcune immagini ha funzionato, eliminando l'intreccio
  • Alcune immagini ho rimosso l'intreccio, ma poi ha dovuto rimuovere la trasparenza come bene e questo sembrava per risolvere il problema
  • Ho cercato di scherzare con le larghezze ma non penso che sia quello.

solo la mia esperienza

3

Ho eseguito in questo problema così su uno dei nostri siti. Avevo un sito per dispositivi mobili che utilizzava immagini PNG in background per gradienti, che apparivano come barre nere su iOS6 (Chrome e Safari Apps).

li fissato facilmente ri-salvare le immagini per il web come

  • essendo almeno 10px vasta
  • salvataggio come non interlacciata PNGs

Questo ha risolto immediatamente i miei problemi.

+0

iOS è abbastanza intelligente da supportare immagini di 1px-wide. Sospetto che la precisione sia il problema di fondo, forse abbinato a una larghezza ridotta? – Zenexer

+0

è sufficiente salvare l'immagine poiché i PNG non interlacciati funzionano correttamente per me – mixable

0

Appena un problema è stato lo stesso, ri-salvando il .png con l'interlacciamento rimosso risolto il problema.

1

L'ho appena incontrato su un server web. La soluzione era di cambiare il PNG dalla precisione a 8 bit interi a 32 bit. Apparentemente iOS non può gestire correttamente 8 bit; Non so a 16 bit. Penso che Photoshop avrebbe potuto farlo automaticamente a causa della bassa complessità dell'immagine (una semplice sfumatura). È stato facile risolvere in GIMP: Image -> Precision -> 32-bit integer

+0

Nota: l'immagine è/non era interlacciata ed è/era larga un pixel. – Zenexer

1

La modifica della dimensione della mia img sembra funzionare, ma qualche problema strano si verifica quando si esegue lo zoom ... Alla fine, la soluzione migliore per me è salvare l'immagine come jpg.