Linee sottili grigie/nere sulla pagina web visualizzate con iPad

Question

Stiamo riscontrando che l'iPad mostra sottili linee grigie/nere sul nostro sito. Sembra essere una forma di artefatto di ridimensionamento su Safari mobile. Ho fornito due snippet di pagine sottostanti, con il contrasto ottimizzato per evidenziare il problema, purtroppo perché il display dell'iPad è abbastanza buono, queste linee sono piuttosto evidenti.

Sembrano andare e venire mentre la pagina viene ingrandita, e sembrano div/immagini vengono ridimensionate con problemi di arrotondamento ai bordi, causando la fusione del pixel del bordo con il nero.

Qualcuno ha trovato una soluzione alternativa o una soluzione per questo?

Grazie

Answer 1

Ho provato un sacco di correzioni per eliminare queste piccole linee grigie-ish quando mobili-safari è stata ingrandita, e la correzione più semplice e flessibile che ho trovato è stato qui:

http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/

In sostanza, si aggiungere

margin-bottom:-1px; 

Per gli elementi che sono sempre in linea tratteggiata confini aggiunto.

Answer 2

Lo zoom iOS sembra prendere alcuni dati dalla riga successiva nell'immagine (forse errore di arrotondamento sul interpolazione?). Ho fatto alcuni test, e sembra essere un problema costante. Ho segnalato questo come un bug per Apple.

L'aggiunta di 1 linea di pixel di sfondo all'immagine (o il riempimento di 1 pixel se lo si desidera) sembra fare il trucco. Non ideale ma funziona.

Probabilmente lo stesso problema di Rendering borders bug in Safari mobile su Safari Mobile in generale.

Answer 3

Aggiungendo questo al blocco sopra la linea ha funzionato molto bene per me.

margin-top:-1px; /* this overlap the blamed ghost line */ 
padding-top:1px; /* this gave me my pixel back =) */ 

se succede a te in troppi blocchi, dovresti invece creare una classe.

Answer 4

Se lo <div> non è dello stesso colore dello sfondo ed è bianco, questo è molto visibile.
Fondamentalmente, lo background-color nel formato deve essere dello stesso colore di <div> seduto sopra di esso o si otterrà una linea.
Un lavoro facile è quello di cambiare il o fare una tessera che coprirà le aree sullo sfondo in cui il sedere.

Answer 5

Se le risposte di cui sopra non funzionano per voi come non l'hanno fatto per me non c'è una cosa in più si potrebbe desiderare di provare che mi ha risolto problema:

border-bottom: 1px transparent solid ; 
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */ 

aggiunta di un bordo un bordo trasparente in fondo sembrava essere d'aiuto, il mio ragionamento è che tenta ancora di rendere un bordo e anche se è trasparente lo costringe a ri-renderizzare quei pixel. Questo però è pura congettura ma la soluzione sembra funzionare!

Answer 6

Poiché questo è attivato dal colore di sfondo, basta usare un'immagine 1px gif bg dello stesso colore di sfondo e ripeterlo. Se si utilizza Modernizr si può scrivere qualcosa di simile:

.touch .class-of-td { background: transparent url(../_img/services/1px-bgfix.gif) repeat; }

Questo funziona anche per gli elementi che vengono visualizzati table-cell per ottenere vertical-align: middle.

Answer 7

Avevo lo stesso problema con le righe 1px visualizzate nei browser desktop e su iPad e iPhone.

qui era il mio vecchio css:

html,body { 

background:url(images/bg.jpg); 
height:100%; 
    background-color:#E8E8E8; 
text-align:center; 
text-decoration:none; 
width:auto; 

} 

Il mio nuovo css:

html,body { 

background:url(images/bg.jpg); 
height:100%; 
text-align:center; 
text-decoration:none; 
width:auto; 

} 

Rimozione "background-color:" ha risolto questo problema con tutti i miei siti.

Answer 8

ho avuto una linea di grigio (solo iPad) in fondo alla mia barra di intestazione e fissata con:

position:relative; 
z-index:2; 

direttamente aggiunti al contenitore di intestazione. forse questo potrebbe aiutare qualcuno.

Answer 9

Nel mio caso particolare, il dividente non sarebbe stato riparato con margine: -1px o trucchi di confine. Ho avuto un div con:

height: 0px; 
padding-bottom: 57.2%; 

- questo è un trucco per creare un elemento che mantiene le sue proporzioni in diverse larghezze, perché l'imbottitura superiore/inferiore deriva la percentuale dalla larghezza. Nel mio caso, sono stato in grado di risolvere il problema modificando questo:

height: 1px; 
padding-bottom: 57.2%; 

IMPORTANTE: vale la pena notare che ho trovato un aggiornamento della pagina incriminata, anche con stili cambiato, non rimuovere la riga, anche quando ho nascosto il corpo *. Per rimuovere le linee ogni volta che tornavano, dovevo riavviare il dispositivo.

• (body {display: none} che è, non è inquinamento delle prove)

Answer 10

Ho anche avuto lo stesso problema nella mia home page e nessuna di queste soluzioni lavorato per me. Nel mio caso particolare era lo sfondo che mostrava tra gli strati div come diceva Johnny. Ho finito per avvolgere gli strati esistenti con un altro div e ho reso lo stesso colore di sfondo dei due strati esistenti e le linee non erano più visibili. Se nient'altro funziona, provalo.

Answer 11

Avevamo una linea bianca nella parte inferiore di una pagina intera iframe in iPad, quindi abbiamo impostato l'altezza al 100,5% e questo ha risolto il problema.