Líneas grises/negras delgadas en la página web visualizadas con el iPad

Question

Estamos descubriendo que el iPad muestra líneas grises/negras delgadas en nuestro sitio. Parece ser una especie de artefacto de escalado en Safari móvil. He proporcionado dos fragmentos de páginas a continuación, con el contraste ajustado para resaltar el problema, desafortunadamente porque la pantalla del iPad es bastante buena, estas líneas son bastante notables.

Parece que van y vienen a medida que se amplía la página, y parece que las divisiones/imágenes se escalan con problemas de redondeo en los bordes, lo que hace que el borde del píxel se mezcle con negro.

¿Alguien ha encontrado una solución o una solución para esto?

Gracias

Answer 1

He intentado un montón de correcciones para eliminar estas pequeñas líneas de color gris-ish cuando móvil Safari fue ampliada, y la más simple y más flexible solución que encontré fue aquí:

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

En esencia, se agregar

margin-bottom:-1px; 

A los elementos que están obteniendo bordes de línea fantasma añadidos.

Answer 2

El zoom iOS parece tener algunos datos de la siguiente línea en la imagen (quizá error de redondeo en la interpolación?). Hice algunas pruebas, y parece ser un problema constante. Informé de esto como un error para Apple.

Añadir 1 línea de píxeles de fondo a la imagen (o 1px padding si lo prefiere) parece hacer el truco. No es ideal, pero funciona

Posiblemente el mismo problema que Rendering borders bug in Safari mobile en Safari Mobile en general.

Answer 3

Agregar esto al bloque de arriba me funcionó muy bien.

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

si le sucede en demasiados bloques, debe crear una clase en su lugar.

Answer 4

Si el <div> no es del mismo color que el fondo y es blanco, esto es muy visible.
Básicamente, el background-color en formato debe ser del mismo color que el <div> encima o se obtendrá una línea.
Un trabajo fácil es cambiar el background-color para que coincida con el <div> o hacer un mosaico que cubra las áreas en el fondo donde se sienta el <div>.

Answer 5

Si las respuestas anteriores no funcionan para usted, ya que no lo hicieron para mí no es una cosa extra que puede que desee probar los que sí me soluciona problema:

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

Añadir un borde un borde transparente en el fondo parecía ayudar, mi razonamiento es que todavía intenta hacer un borde y, aunque es transparente, lo obliga a volver a renderizar esos píxeles. Sin embargo, eso es pura conjetura, pero la solución parece funcionar.

Answer 6

Dado que esto se desencadena por el color de fondo, simplemente utilice una imagen 1px gif bg del mismo color de fondo y repítalo. Si utiliza Modernizr se puede escribir algo como esto:

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

Esto también funciona para los elementos que se muestran en células mesa para conseguir vertical-align: medio.

Answer 7

Estaba teniendo el mismo problema con las líneas de 1px que aparecen en los navegadores de escritorio y en el iPad y el iPhone.

Aquí fue mi vieja css:

html,body { 

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

} 

Mi nuevo css:

html,body { 

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

} 

extracción de un "background-color:" ha solucionado este problema con todos mis sitios.

Answer 8

que tenían una línea de color grisáceo (sólo iPad) en la parte inferior de mi barra de encabezado y se fijaron con:

position:relative; 
z-index:2; 

añade directamente al recipiente colector. quizás esto también podría ayudar a alguien.

Answer 9

En mi caso particular, el div ofensor no se arreglaría con margen: -1px o trucos de frontera. que tenía un div con:

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

- Este es un truco para crear un elemento que conserva sus proporciones en diferentes anchuras, porque la parte superior de relleno/inferior deriva el porcentaje de la anchura. En mi caso, yo era capaz de solucionarlo cambiando esto:

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

IMPORTANTE: vale la pena señalar que he encontrado una actualización de la página ofensiva, incluso con estilos cambiados, no eliminó la línea, incluso cuando escondí el cuerpo *. Para eliminar las líneas cada vez que regresaban, tuve que reiniciar el dispositivo.

• (body {display: none}, es decir, no la manipulación de pruebas)

Answer 10

también tuve el mismo problema en mi página de inicio y ninguna de estas soluciones trabajó para mí. En mi caso particular, era el fondo que se mostraba entre las capas div, como decía Johnny arriba. Terminé envolviendo las capas existentes con otro div y lo hice del mismo color de fondo que las dos capas existentes y las líneas ya no eran visibles. Si nada más funciona, pruébalo.

Answer 11

Teníamos una línea blanca en la parte inferior de un iframe de página completa en iPad, por lo que simplemente establecimos la altura en 100.5% y esto resolvió el problema.