linee orizzontali misteriosi sul mio sito se fusi su iPad

Question

il seguente sito:

http://staging.jungledragon.com

ha alcuni problemi di rendering su iPad utilizzando Safari, quindi sto cercando di risolverli. C'è un problema in cui sono bloccato però. Se hai un iPad, apri il sito in modalità verticale. Ci sono due linee orizzontali indesiderate che appaiono, una superiore che incrocia le schede (Popolare, Fresca, ecc.) E una in basso che si trova proprio sopra l'illustrazione della lucertola. Entrambe le linee non dovrebbero essere lì.

Queste righe non compaiono su nessun altro browser testato, incluso Safari su Windows. Quando si sposta lo stesso sito in modalità orizzontale sull'iPad, la linea orizzontale in alto scompare, mentre quella in basso rimane. Se ingrandisci un po 'la riga inferiore, scompare anche questo.

Sto provando varie correzioni CSS inutilmente e sto cominciando ora a pensare che questo sia un problema di rendering di Safari, anche se probabilmente attivato da me.

Qualsiasi aiuto è molto apprezzato. Sembra un problema minore ma odio la sciatteria.

Answer 1

Oops - come è successo?

La meta per andare nel tag testa per per fermare lo zoom sul iPad:

<meta name="viewport" content="initial-scale=1, maximum-scale=1"> 

Answer 2

Hai provato a ripristinare un css? Se non provi ad aggiungerne uno potrebbe essere qualcosa di standard per i dispositivi mobili per vedere se esiste ancora se lo controlla in firebug per vedere esattamente di cosa si tratta

Answer 3

Il problema ha a che fare con il modo in cui Mobile Safari gestisce le immagini di sfondo . La linea verde che si apre (appena all'interno dell'area del contenuto) proviene da un altro elemento.

Provare a "ridimensionare" le immagini. Ad esempio: Un'immagine viene tagliata a un'altezza di 100 pixel, rendendo l'immagine alta 110 pixel. Questo funziona per me ... il più delle volte.

Modifica: ho controllato il sito sul mio iPad e ho appena visto quella singola linea spuntare. Si noti inoltre che scompare quando si esegue lo zoom in/out che mi dice che si tratta di un bug di rendering (non qualcosa nel tuo css).

Answer 4

Un'alternativa è specificare la dimensione dello sfondo. Questo può essere fatto con il selettore css "background-size".

Se l'immagine di sfondo è alto 40 pixel, il seguente codice impedirà linee orizzontali da mostrare su iPad: {background-size: 100% 40px}

Answer 5

si può risolvere un sacco di questi "vuoti iPad "I problemi di disattivando lo zoom completamente sul iPad, mediante l'uso di questo meta tag, alla Facebook:

<meta name="viewport" content="initial-scale=1, maximum-scale=1"> 

questo modo si evita lo zoom su iPad, ma ha fissato tutto il mio 'problema completamente vuoti div'.

Answer 6

sovradimensionamento le immagini di sfondo manualmente o utilizzando CSS3 dovrebbe quasi sempre lavorare, come Damien e namsral sottolineato.

Tuttavia, a volte questo non risolverà il problema nei casi in cui l'immagine di sfondo è ancorata in una determinata posizione.Ad esempio, se l'immagine di sfondo è ancorata al fondo del tuo div e la linea appare in fondo a questo div, allora devi spostare l'immagine di sfondo più in basso [rispetto al fondo] di una certa quantità, a seconda dell'altezza di il tuo div. Ad esempio:

background-postion: center 100,1%;

Answer 7

L'immagine di sfondo che stavo usando si ferma a metà strada attraverso il div di contenuto e quindi lo sfondo dell'elemento contenitore deve essere visualizzato.

Poiché l'iPad ingrandisce il div più esterno, lo sfondo pertinente applicato al tag html non viene visualizzato. Sembra che iPad non piace quando un colore di sfondo fallback non è definito, così ho dovuto aggiungere un po 'iPad-specifica CSS utilizzando una media query:

html { background:#ffffff url("images/bg-html.png") center top repeat-x; } 
html#inside-html { background:#ffffff url("images/inside-bg-html.png") center top repeat-x; } 

body { 
    background:transparent url("images/bg-body.jpg") center top no-repeat; 
    text-align:center; 
    font:12px Helvetica, Arial, Verdana, sans-serif; 
    line-height: 20px; 
    color:#000; 
    min-width: 980px; 
} 

body#inside { background: transparent url("images/inside-bg-body.jpg") center top no-repeat; } 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
    body { 
     background: #fff url("images/bg-body.jpg") center top no-repeat; 
    } 

    body#inside { 
     background: #fff url("images/inside-bg-body.jpg") center top no-repeat; 
    } 
} 

Answer 8

applausi, ho avuto lo stesso ma su Andriods e utilizzando l'immagine di sfondo: 100% 460px; ha aiutato a risolvere il mio :)

Answer 9

C'è uno span o div senza alcun contenuto in esso.

Si prega di dare un disply:none; a questo div o span e vedere il risultato.