El siguiente sitio:

http://staging.jungledragon.com

Tiene algunos problemas de representación en el iPad utilizando Safari, así que estoy tratando de arreglar. Hay un tema donde estoy atascado sin embargo. Si tienes un iPad, abra el sitio en modo de retrato. Hay dos no deseados líneas horizontales que aparecen, de una parte superior que cruza las fichas (Popular, Fresco, etc) y una parte inferior que se encuentra justo por encima de la lagartija de la ilustración. Ambas líneas no deberían estar ahí.

Estas líneas no aparecen en ningún otro navegador de la prueba, incluyendo Safari en Windows. Cuando se mueve el mismo sitio en el modo horizontal en el iPad, la parte superior de la línea horizontal desaparece, mientras que la parte inferior se mantiene. Si te acercas un poco a la línea de fondo, a continuación, desaparece también.

He estado probando varios arreglos de CSS en vano y ahora estoy empezando a pensar que esto es un problema de procesamiento de Safari, aunque posiblemente provocado por mí.

Cualquier ayuda es muy apreciada. Parece un tema menor pero odio al descuido.

condicional pixeles malos? 😉 [en serio – buscando en él. pruebe algunas herramientas como firebug para identificar si no es un borde de un elemento]
a ver si jugando con la tabla de atributos en la principal.css, línea 12 ayuda. Quite los 2 líneas de presentar y poner borde negro definición de allí. a continuación, ver si puede ver las líneas.
Los lugares que usted describe es la ubicación de la parte superior y la parte inferior de la #contenido div, supongo que no es una coincidencia.
BTW. Una captura de pantalla sería de utilidad. No un montón de gente comprando iPads, usted sabe 😉

OriginalEl autor Ferdy | 2010-11-19

9 Comentarios

  1. 6

    Uy – ¿cómo sucedió eso?

    La meta para ir en la etiqueta head a dejar de hacer zoom en el iPad:

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    Como se señala más adelante esta toma de distancia de usuario de control de la ventanilla, que en la mayoría de los casos debe ser evitado.

    OriginalEl autor nev

  2. 9

    La cuestión tiene que ver con la forma en Mobile Safari maneja las imágenes de fondo. La línea verde que aparece (sólo dentro de su área de contenido) es de otro elemento.

    A tratar de ‘exceso de tamaño’ sus imágenes. Por ejemplo: Una imagen se corta en 100 pixels de altura, hacen que la imagen 110 píxeles de alto. Esto funciona para mí… la mayoría del tiempo.

    Edit: hice revisar el sitio en mi iPad y me di cuenta de que sola línea apareciendo. Tenga en cuenta también que desaparece cuando se hace zoom in/out, que me dice que es una representación de un error no es algo en tu css).

    Por cierto, cuando digo que es la manera en Mobile Safari ‘asas’ imágenes de fondo, me refiero a que es un bug.
    La intuición me dice que es posible solucionarlo con background-position la redefinición de los valores predeterminados como píxeles o porcentajes
    Muchas gracias Damián, no hay manera de que hubiera descubierto esto a mí. Yo era capaz de deshacerse de la parte superior de la línea de por el aumento de la altura de la imagen de fondo con un par de píxeles.
    Lo siento por los 2 comentarios, presiona entrar que desencadena el envío. La segunda línea fue eliminado por quitar el color de fondo del pie de página, que he utilizado en combinación con una imagen de fondo. Los cambios que se están trabajando en mi entorno dev así que no se les puede ver en la URL de arriba todavía.
    Creo que esta es la mejor solución porque no desactivar la función de zoom, que es bastante esencial funcionalidad con el uso de una tableta.

    OriginalEl autor Damien

  3. 2

    Una alternativa es especificar el tamaño del fondo. Esto se puede hacer con el selector css «background-size».

    Si la imagen de fondo es de 40 píxeles de alto, el código siguiente a prevenir las líneas horizontales que se muestre en el iPad: { background-size: 100% 40px }

    OriginalEl autor Lars Wiegman

  4. 1

    Sobre el tamaño de su fondo de imágenes de forma manual o utilizando CSS3 debe casi siempre funciona, como Damien y namsral señaló.

    Sin embargo, a veces esto no va a resolver el problema en los casos donde la imagen de fondo está anclado en una posición determinada. Por ejemplo, si la imagen de fondo está anclada a la parte inferior de la div, y la línea que aparece en la parte inferior de este div, entonces usted debe cambiar la imagen de fondo de la menor [de la parte inferior] por una cierta cantidad, dependiendo de la altura del div. Por ejemplo:

    de fondo-posición: centro de 100.1%;

    OriginalEl autor Pavel Petrenko

  5. 0

    Trató de un css reset? Si no tratar de agregar uno podría ser algo estándar para dispositivos móviles para ver si todavía existe si no la pruebe en firebug para ver exactamente qué es

    Hubiera sido mejor como un comentario, como usted es sólo una suposición.
    Gracias por pensar, pero sí, yo siempre empiezo mis proyectos web con un CSS reset.

    OriginalEl autor Josh Bedo

  6. 0

    La imagen de fondo que estaba usando se detiene a mitad de camino a través de la div de contenido y, a continuación, el fondo del elemento contenedor que se supone que para mostrar.

    Porque el iPad hace un zoom en la parte más externa de div, el fondo que se aplica a la etiqueta html no se muestra. Parece que el iPad no me gusta cuando un color de fondo de reserva no está definido, así que tuve que agregar algunas iPad específicas de CSS utilizando una consulta de medios:

    html { background:#ffffff url("images/bg-html.png") center top repeat-x; }
    html#inside-html { background:#ffffff url("images/inside-bg-html.png") center top repeat-x; }
    
    body { 
        background:transparent url("images/bg-body.jpg") center top no-repeat;
        text-align:center; 
        font:12px Helvetica, Arial, Verdana, sans-serif;
        line-height: 20px;
        color:#000;
        min-width: 980px;
    }
    
    body#inside { background: transparent url("images/inside-bg-body.jpg") center top no-repeat; }
    
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
        body {
            background: #fff url("images/bg-body.jpg") center top no-repeat;
        }
    
        body#inside {
            background: #fff url("images/inside-bg-body.jpg") center top no-repeat;
        }
    }

    OriginalEl autor cfree

  7. 0

    saludos, yo tuve el mismo pero en Andriods y el uso de la imagen de fondo:100% 460px; ayudó a resolver el mío 🙂

    OriginalEl autor Geoff

  8. 0

    Puede solucionar muchos de estos iPad «lagunas» de problemas mediante la desactivación de zoom completo en el iPad, por el uso de esta etiqueta meta, a la Facebook:

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    Esto evita el zoom en el iPad, pero se ha arreglado todos mis «div lagunas» problema completamente.

    Parece algún código o en un enlace que se trató de pegar en perdimos. Puedes intentar de nuevo?

    OriginalEl autor nev

  9. 0

    Hay un span o div sin ningún contenido en ella.

    Por favor, dar una disply:none; a este div o span y ver el resultado.

    ¿Cuál es el punto de hacer que?

    OriginalEl autor keivan kashani

Dejar respuesta

Please enter your comment!
Please enter your name here