Artefactos de línea en Safari móvil

Question

Safari representa líneas negras entre divisiones en mi sitio web en algunas escalas. Es especialmente malo cuando se rompe una imagen que se divide en dos divs diferentes para un botón o algo. No puedo poner un BG en el padre de los dos div porque son transparentes .pngs. ¿Alguna solución o solo lidiar con eso?

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

Traviso también tiene el mismo problema, y ​​me cambió la forma fue presentada a la página, originalmente era una simple tabla con 5 filas, que elimina las filas y simplemente se fue con imágenes y br, todavía sucede. He intentado eliminar todo el relleno y los márgenes a través de CSS, pero era bastante obvio que el problema no es la representación del navegador, sino que con el remuestreo que hace el navegador para convertir la página en un tamaño que cabe en la pantalla. Usted puede ver mi página rota en:

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

Answer 1

Traviso, debe deshacerse del estilo img en el CSS! Si utiliza sólo esto:

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

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

debe rendir correctamente en su iPhone!

Answer 2

El siguiente CSS, agregado al div problemático con una imagen de fondo especificada, es lo que lo solucionó. Cualquier cosa menor a 3px mostraría artefactos ligeros en algunos niveles de zoom de Safari.

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

Answer 3

Este problema es el resultado de un error de redondeo producido en Safari móvil cuando se cambia la escala de imágenes de fondo de pantalla (que es un error: http://openradar.appspot.com/8684766).

La solución es aumentar el ancho del borde del botón derecho en su lado izquierdo en 1 o 2 píxeles. A continuación, ajuste su CSS de forma correspondiente para que los 1 o 2 píxeles que agregó no se muestren de forma predeterminada.

Answer 4

Encontré cambiando el color de fondo del elemento con el 'borde gris' que me funcionó.

Answer 5

Agregar un valor de initial-scale a la metaetiqueta de la ventana resolvió este problema para mí.

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

Answer 6

tuve un problema similar cuando se visualiza una imagen PNG en una etiqueta div. Una delgada línea negra (1 px creo) fue renderizada en el costado de la imagen. Para solucionarlo, tuve que agregar el siguiente estilo de CSS: box-shadow: none;