html - mail - la pantalla de mi iphone se ve opaca

iPod touch iOS6: los elementos con imágenes de fondo grandes aparecen en blanco

Question

He reproducido esto en dos dispositivos iPod touch separados con iOS 6. El iPhone no parece verse afectado, como tampoco lo es el iPad.

Estoy usando un archivo sprite para imágenes en mi aplicación web. Ahora estoy tratando de proporcionar soporte de retina, por lo que he creado un archivo retina Sprite separado que es dos veces más grande que uno de baja calidad.

Parece que ni a Chrome ni a Safari les gusta mostrar esto.

Estoy haciendo lo siguiente: .img { background: url(xx-retina.png) no-resize top left; height: xx; width: xx; display: block } .img { background: url(xx-retina.png) no-resize top left; height: xx; width: xx; display: block }

Y en el cuerpo: <div class=''img''/>

El tipo de etiqueta no importa. Las compensaciones de posición de fondo que especifico no importan. La imagen no se mostrará, aunque parece cargarse si miro las herramientas de depuración. Si empiezo a recortar la imagen, eventualmente aparecerá.

Alguien tiene alguna información de esto ?

Answer 1

Tengo el mismo problema. He probado imágenes grandes png-8, png-24 y gif y no importa si tienen transparencia o no: la imagen no se mostrará en iPOD.

También intenté dibujar las imágenes en lienzo pero tampoco funcionó.

Si no necesita transparencia puede hacer que sus imágenes sean jpg; el jpg más grande que utilicé fue de 14 mb y todavía se mostraba correctamente.

Answer 2

El mismo problema me pasa a mí. Estoy usando una imagen grande como fondo de la parte de apertura del sitio. En el iPad y iPhone funciona muy bien ... en el iPod, la imagen no se carga en absoluto. ¡Tan extraña! He hecho sitios mucho más complejos con muchas imágenes y nunca he tenido este problema.

Answer 3

Tengo el mismo problema: la cuarta generación de iPod Touch con iOS 6 no mostrará la imagen de fondo de la página de un teléfono. Como todavía quiero dispositivos más grandes / de alta resolución para usar la imagen de alta resolución, lo que hice fue utilizar una consulta de medios para cambiar la imagen de fondo de pantallas más pequeñas.

@media (max-width: 500px) {
    #login {
        background: url(../../splash/640-960.png);
    }
}

En el caso del OP, querrá utilizar una consulta de medios similar y establecer su clase de imagen para usar las imágenes más pequeñas / originales:

@media (max-width: 500px) {
    .img {
        background: url(xx-non-retina.png) no-resize top left; 
    }
}

Seleccioné un ancho máximo de 500px porque el iPod Touch de 4ta generación tiene una resolución efectiva de 320w x 480h, por lo que en orientación horizontal, el ancho de la pantalla será de 480px.