Estamos encontrando en el que el iPad es mostrar fina de color gris/negro líneas en nuestro sitio. Parece ser algún tipo de ampliación de la escala de artefacto en mobile Safari. Me ha proporcionado dos fragmentos de las páginas a continuación, con el contraste ajustado para resaltar el problema, por desgracia, debido a que la pantalla del iPad es bastante buena, estas líneas son bastante notables.

Parecen ir y venir a la página ampliada, y se ven como divs/imágenes se escalan con problemas de redondeo de los bordes, causando el borde de píxeles para ser mezclado con negro.

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

Gracias

Delgada gris/líneas negras en la página web ver con el iPad

Delgada gris/líneas negras en la página web ver con el iPad

Es similar a stackoverflow.com/questions/3903106/…, pero no hay una sugerencia en la que se pregunta acerca de una solución.

OriginalEl autor Adam | 2011-01-24

11 Comentarios

  1. 12

    He intentado un montón de correcciones para eliminar estas gris-ish pequeñas líneas móviles-safari fue ampliada, y el más simple y más flexible de la revisión he encontrado aquí:

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

    Básicamente, agregar

    margin-bottom:-1px;

    A los elementos que están recibiendo el fantasma de la línea de fronteras añadido.

    terrible «solución» para la precisión a nivel de píxel diseños
    la mejor solución para el gradiente de fondo en el móvil también

    OriginalEl autor Jared Henderson

  2. 3

    El iOS zoom parece tomar algunos datos de la siguiente línea en la imagen (tal vez el error de redondeo en la interpolación?). Hice algunas pruebas, y parece ser un problema consistente. Me informó de esto como un error de Apple.

    La adición de 1 línea de fondo de color de los píxeles de la imagen (o 1px relleno si se quiere) parece hacer el truco. No es ideal, pero funciona.

    Posiblemente mismo problema que La representación de las fronteras error en Safari mobile en Safari Mobile en general.

    OriginalEl autor Marcus

  3. 2

    Si las respuestas anteriores no funcionan para usted, ya que no para mí no es un extra, cosa que usted puede desear para intentar que hizo resolverme tema:

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

    Añadir un borde transparente de la frontera a la parte inferior parecía ayudar, mi razonamiento es que aún intenta representar una frontera y aunque es transparente, se le obliga a volver a representar los píxeles. Sin embargo, esto es pura conjetura, pero la solución parece que funciona!

    OriginalEl autor Leonard

  4. 1

    Ya que esto es provocado por el color de fondo sólo tiene que utilizar una 1px gif bg imagen de el mismo color de fondo y repetir. Si utiliza modernizr usted 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 la tabla de células para obtener vertical-align: middle.

    OriginalEl autor Ian Venskus

  5. 1

    Tenía un color grisáceo línea (solo iPad) en la parte inferior de mi barra de encabezado y se fija con:

    position:relative;
    z-index:2;

    añade directamente a la cabecera del contenedor.
    tal vez esto podría también ayudar a alguien.

    OriginalEl autor silenzium

  6. 0

    Sumado esto a que el bloque por encima de la línea que funcionó para mí muy bien.

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

    si su ocurriendo en muchos de los bloques que se debe crear una clase en su lugar.

    OriginalEl autor Luis Rivera

  7. 0

    Si el <div> no es el mismo color que el fondo y es de color blanco, esto es muy visible.

    Básicamente, el background-color en formato debe ser el mismo color que el <div> sentado encima de él o se obtendrá una línea.

    Una fácil solución es cambiar el background-color para que coincida con el <div> o hacer un azulejo que cubrirá las áreas en el fondo, donde la <div> sentarse.

    OriginalEl autor johnny

  8. 0

    Yo tenía este mismo problema con la 1px líneas que muestran en los navegadores de escritorio y en el iPad y el iPhone.

    Aquí estaba mi viejo 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;
    
    }

    La eliminación de «background-color:» ha resuelto este problema con todos mis sitios.

    OriginalEl autor Steve

  9. 0

    En mi caso en particular, el infractor div no se fija en los márgenes:-1px o frontera trucos.
    Yo 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 anchos, debido a que el relleno de la parte superior/inferior deriva el porcentaje de la anchura. En mi caso, yo era capaz de solucionarlo cambiando esto:

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

    IMPORTANTE: cabe destacar que he encontrado una actualización de la página conflictivo, incluso con la modificación de los estilos, no quite la línea, incluso cuando me escondí el cuerpo*. Para quitar las líneas cada vez venían de vuelta, he tenido que reiniciar el dispositivo.

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

    OriginalEl autor qwertyisms

  10. 0

    También tuve el mismo problema en mi página de inicio y ninguna de estas soluciones funciona para mí. En mi caso particular fue el de fondo mostrando en entre el div capas de Johnny en la parte de arriba estaba diciendo. Me terminó de envolver las capas existentes con otro div y lo hizo el mismo color de fondo como las dos capas existentes y de las líneas ya no es visible. Si nada más funciona darle una oportunidad.

    OriginalEl autor eric

  11. 0

    Hemos tenido una línea blanca en la parte inferior de la página completa de un iframe en el iPad, acaba de establecer la altura a 100.5% y ya esta resuelto el problema.

    OriginalEl autor Devin G Rhode

Dejar respuesta

Please enter your comment!
Please enter your name here