iPad/ios6 no representa la imagen de fondo png

Question

En ios5, el sitio web carga bien y parece correcto.

Desde ios6 una sección de mi sitio web que utiliza una imagen png como fondo comienza a mostrarse en el iPad pero luego el fondo simplemente cambia a negro sin razón aparente (tenga en cuenta que todas las demás secciones conservan el color correcto).

código:

<section id="showcase"> 
    <section class="container"> 
    <img src="images/usp.jpg" alt="USP Screen" id="screen"> 

    <h2>title</h2>  

    <p>the text.</p> 

    <p>The text.</p> 
    </section></section> 

CSS:

#showcase   { background: url(../images/showcasebg.png) repeat-x #ededed; height: 600px; position: relative; top: 87px; } 
#showcase h2  { float: left; max-width: 422px; font-family: 'Lobster', cursive; font-size: 36px; margin-top: 20px; } 
#showcase p   { float: left; max-width: 422px; margin-top: 20px; } 

Answer 1

no estoy seguro de si está directamente relacionado, pero tuve un problema similar anoche. Estaba usando una URL relativa para la imagen y descubrí que iOS6 estaba codificando espacios en la ruta de la imagen como% 2520 en vez de% 20. Esto fue un problema para mí porque estaba viendo un recurso de imagen en una vista web en una aplicación en el simulador, por lo que la ruta al recurso proporcionado por el simulador tiene espacios en él. Esto no es un problema en el dispositivo, donde no hay espacios en la ruta.

Encontré el nuevo inspector remoto (mencionado aquí: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers) muy útil para determinar lo que estaba pasando.

Answer 2

Problema similar aquí. Todas las páginas debajo de la sección de trabajo de mi sitio web (http://paulcremoux.com/en/trabajo/) tienen una png larga. A menudo, las imágenes dejan de cargarse antes de completarse; otras veces se cargan y luego se bloquean. (Hay que echarle un vistazo a un par de páginas porque puede parecer que funciona bien al principio.)

Solo ocurre en ios6.

Answer 3

Tuvimos un problema similar.

Acabamos de abrir el PNG en PhotoShop y lo volvimos a guardar, y después de eso se mostró bien. No cambiamos el perfil de color ni nada de eso, solo lo abrimos, dejamos todas las configuraciones iguales, y lo guardamos de nuevo, y luego estuvo bien.

Tenemos un número de fondos PNG en nuestro sitio, pero solo dos PNG particulares no se muestran correctamente. Entonces, creemos que esos dos en particular se guardaron con fallas o algo cuando se crearon por primera vez.

Quién sabe. shrug

Answer 4

Acabo de experimentar el mismo problema, en iOS6 Safari. Una imagen de fondo repeat-x .PNG que parecía negra. Bajo fuerte presión de tiempo lo guardé como .JPG y resolví el problema de renderizado.

Answer 5

Lo que funcionó para mí no era el mismo para todos:

• Algunas de las imágenes se trabajó mediante la eliminación de las entrelazado
• Algunas imágenes Quité el entrelazado, pero luego tuvo que retirar la transparencia, así y esto parecía para solucionar el problema
• Traté de perder el ancho pero no creo que sea eso tampoco.

sólo mi experiencia

Answer 6

me he encontrado con este tema, así en uno de nuestros sitios. Tenía un sitio móvil con imágenes PNG de fondo para degradados, que aparecían como barras negras en iOS6 (aplicaciones de Chrome y Safari).

les fijan fácilmente por volver a guardar las imágenes para web como

• siendo al menos 10px amplia
• guardándolos como PNG no entrelazados

Esto solucionó inmediatamente mis problemas.

Answer 7

Acaba de tener un problema igual a este, al guardar el .png con el entrelazado eliminado resolvió el problema.

Answer 8

Acabo de encontrar esto en un servidor web. La solución fue cambiar el PNG de una precisión de 8 bits a 32 bits. Aparentemente iOS no puede manejar 8 bits correctamente; No sé acerca de 16 bits. Creo que Photoshop pudo haber hecho esto automáticamente debido a la baja complejidad de la imagen (un simple degradado). Fue fácil de arreglar en GIMP: Image -> Precision -> 32-bit integer

Answer 9

Cambiar el tamaño de mi img parece funcionar, pero ocurre un problema extraño al hacer zoom ... Eventualmente, la mejor solución para mí es guardar la imagen como jpg.