iPad y iPhone rotan imágenes en el sitio?

13

Estoy experimentando una ocurrencia extraña en un sitio que estoy construyendo en este momento donde las imágenes se muestran 90 grados diferentes de cómo se supone que deben hacerlo, pero manteniendo las dimensiones normales de la imagen que especifiqué. Esto solo ocurre en Safari en iPad y iPhone para mí ... todos los demás navegadores no tienen este problema.

ingrese la descripción de la imagen aquí

¿Algunas ideas?

La página en cuestión se puede ver aquí: http://www.andrewpeterson.com/i-had-to-be-a-perfect-gentleman-with-the-princesses/

css images iphone ipad Garrett
fuente
44
Uuuh ... no tengo ningún dispositivo o navegador de Apple para comprobar ... pero ¿tal vez están leyendo información EXIF ​​(especialmente rotación)? Intente eliminar toda la información adicional de estas imágenes (al menos una, use compresores de imagen, como este: punypng.com ) y reemplace su imagen con la versión "optimizada", luego vea si ayuda (asegúrese de que el navegador tenga la versión actual de la imagen, tan claros cachés).
LazyOne
2
+1 por un problema que nunca antes había visto. Un par de puntos de datos adicionales: IrfanView y Photoshop también cargan la imagen superior rotada como en Mobile WebKit / Safari. Desktop Safari no lo hace. Esto respalda la idea de que está en los metadatos de la imagen, aunque hay mucho allí y no he encontrado qué propiedad específica lo está haciendo aquí usando el navegador de Photoshop (aunque no trato mucho con EXIF). Sin embargo, debería darte un punto de partida. @LazyOne, si desea volver a publicar como respuesta real, lo votaré. Acabo de ejecutar la primera imagen a través de PunyPNG, y eso funcionó para mí.
Su
Lo hice :) Thnx Su '
LazyOne
¡Tuve el mismo problema, eliminar los metadatos funcionó!
resolvió el problema :) Si cree que es engorroso obtener programas para eliminar los metadatos, puede abrir la imagen en paint (incluida en Windows), marcarla y copiar, elegir una nueva imagen, pegar su copia y guardar.

Respuestas:

11

Uuuh ... no tengo ningún dispositivo Apple o navegador para comprobar ... pero parece que están leyendo metadatos EXIF (en particular, rotación).

He abierto una de estas imágenes en XnView: la imagen se muestra rotada 90 grados.

Intenta eliminar toda la información adicional de estas imágenes (hazlo por al menos una imagen). Utilice compresores de imagen, como este: punypng.com (o cualquier otra herramienta que pueda eliminar detalles de metadatos ... o simplemente gírelo y guarde de nuevo) y reemplace su imagen con la versión "optimizada".

Cuando verifique nuevamente en el iPad, asegúrese de que el navegador tenga la versión actual de la imagen, de modo que borre los cachés.

PS Thnx Su '

LazyOne
fuente
¡Eso fue todo! Qué cosa más extraña afectar a un navegador web. Terminé usando IrfanView para arreglarlo (abriendo el archivo y volviéndolo a guardar sin metadatos) y ahora todo se muestra bien. ¡Gracias!
Garrett
1

Aquí hay una manera fácil de anular manualmente los metadatos de rotación EXIF, si la imagen se guarda en la orientación correcta en MS Windows. En el Explorador de Windows, haga clic derecho en el archivo de imagen y seleccione "Girar en el sentido de las agujas del reloj". Haga esto 4 veces para rotar la imagen completamente, y luego la imagen tendrá la orientación correcta para todos los sistemas. Luego puede subir la imagen a su servidor web.

BenW
fuente
Esto no funcionó para mí. ¿Quizás Windows Explorer retiene los metadatos en Windows 10 pero no lo mantuvo en versiones anteriores?
M Katz
0

He presentado esto como un error con Apple a través del Bug Reporter de Apple . Si esto es importante para usted y tiene datos de muestra, no puede hacer daño tener más de un informe sobre el problema. La captura de pantalla a continuación debería resaltar el problema, y ​​en el caso de que un empleado de Apple eche un vistazo a esta publicación, la identificación del problema es 11299426.

Comportamiento de rotación inconsistente

Aaron
fuente