Manufatti di linea nel Safari mobile

Question

Safari esegue il rendering di linee nere tra le div sul mio sito Web su alcune scale. È particolarmente brutto quando si rompe un'immagine che viene tagliata in due div diverse per un pulsante o qualcosa del genere. Non riesco a mettere un BG nel genitore dei due div perché sono trasparenti .pngs. Qualche soluzione o semplicemente gestirla?

cattura del problema, http://i.stack.imgur.com/pTLki.png

TravisO ha anche lo stesso problema, e mi ha cambiato come la pagina è stata disposta, in origine si trattava di una semplice tabella con 5 file, ho tolto le righe e appena andato con le immagini e br, succede ancora. Ho provato a rimuovere tutti i padding e i margini tramite CSS, ma era abbastanza ovvio che il problema non è il rendering del browser, ma con il ricampionamento del browser si fa per convertire la pagina in una dimensione che si adatta allo schermo. Si può vedere la mia pagina rotto a:

http://www.apinkdoor.com/show/

Answer 1

TravisO, si dovrebbe sbarazzarsi dello styling IMG nel CSS! se si utilizzano solo questo:

<style type="text/css"> 
* 
{ 
    margin: 0px; 
    padding: 0px; 
} 

body 
{ 
    background-color: #f00; 
    text-align: center; 
} 
</style> 

dovrebbe rendere correttamente sul vostro iPhone!

Answer 2

Il seguente CSS, aggiunto al div problematico con un'immagine di sfondo specificata, è ciò che ha risolto per me. Qualche cosa di meno che 3px ancora mostrerebbe gli artefatti leggeri ad alcuni livelli di zoom di Safari.

margin-top: -3px; /* for Mobile Safari dark line artifact */ 
padding-top: 3px; /* for Mobile Safari dark line artifact */ 

Answer 3

Questo problema è il risultato di un errore di arrotondamento prodotto in Safari Mobile quando si ridimensiona le immagini di sfondo per il display (si tratta di un bug: http://openradar.appspot.com/8684766).

La soluzione è di aumentare la larghezza del lato destro del pulsante sul lato sinistro di 1 o 2 pixel. Quindi regola il tuo CSS di conseguenza in modo che gli 1 o 2 pixel aggiunti non vengano visualizzati di default.

Answer 4

Ho trovato la modifica del colore di sfondo dell'elemento con il "bordo grigio" attorno ad esso ha funzionato per me.

Answer 5

L'aggiunta di un valore initial-scale al metatag della vista ha risolto il problema per me.

<meta name="viewport" content="initial-scale=1.0">

Answer 6

Ho avuto un problema simile quando si visualizza un .png-immagine di un div-tag. Una linea nera sottile (1 px credo) è stata resa sul lato dell'immagine. Per risolvere il problema, ho dovuto aggiungere il seguente stile CSS: box-shadow: none;