iPad e iPhone rodando imagens no site?

13

Estou tendo uma ocorrência estranha em um site que estou construindo no momento em que as imagens são exibidas 90 graus diferentes do que deveriam, mas mantendo as dimensões normais da imagem especificada. Isso só ocorre no Safari no iPad e iPhone para mim ... todos os outros navegadores não têm esse problema.

insira a descrição da imagem aqui

Alguma ideia?

A página em questão pode ser vista aqui: http://www.andrewpeterson.com/i-had-to-be-a-perfect-gentleman-with-the-princesses/

css images iphone ipad Garrett
fonte
4
Uuuh .. Eu não tenho nenhum dispositivo ou navegador da Apple para verificar .. mas talvez eles estejam lendo informações EXIF ​​(principalmente rotação)? Tente remover todas as informações extras dessas imagens (pelo menos uma, use compressores de imagem, como este: punypng.com ) e substitua sua imagem por uma versão "otimizada" e verifique se ela ajuda (verifique se o navegador tem a versão atual da imagem, caches tão claros).
LazyOne
2
+1 para problema que eu nunca nunca visto antes. Mais alguns dados: o IrfanView e o Photoshop também carregam a imagem superior girada como no Mobile WebKit / Safari. O Desktop Safari não. Isso dá suporte à ideia de que está nos metadados da imagem, embora exista muita coisa lá e eu não encontrei qual propriedade específica está fazendo isso aqui usando o navegador do Photoshop (embora não lide muito com EXIF). Deve dar-lhe um ponto de partida, no entanto. @ LazyOne, se você quiser repassar como uma resposta real, eu votarei. Acabei de rodar a primeira imagem no PunyPNG e funcionou para mim.
Su
Eu fiz isso :) Thnx Su '
LazyOne 11/07
Teve o mesmo problema, remover os metadados funcionou!
resolveu o problema :) Se você acha complicado obter programas para excluir os metadados, você pode abrir a imagem no paint (incluída no windows), marcá-la e copiar, escolher nova imagem, colar sua cópia e salvar.

Respostas:

11

Uuuh .. Eu não tenho nenhum dispositivo ou navegador da Apple para verificar .. mas parece que eles estão lendo metadados EXIF (em particular rotação).

Abri uma dessas imagens no XnView - a imagem é exibida girada em 90 graus.

Tente remover todas as informações extras dessas imagens (faça pelo menos uma imagem). Use compressores de imagem, como este: punypng.com (ou qualquer outra ferramenta que possa remover detalhes de metadados ... ou apenas girá-lo e salvar novamente) e substitua sua imagem pela versão "otimizada".

Ao verificar novamente no iPad, verifique se o navegador possui a versão atual da imagem, para limpar caches.

PS Thnx Su '

LazyOne
fonte
Foi isso! Que coisa estranha para afetar um navegador da web. Acabei usando o IrfanView para corrigi-lo (abrindo o arquivo e salvando-o novamente sem metadados) e agora tudo fica bem. Obrigado!
Garrett
1

Tente usar o JPEG e PNG Stripper http://www.steelbytes.com/?mid=30 e remova todas as informações relacionadas aos metadados da imagem. Funciona corretamente.

Anetagama
fonte
1

Aqui está uma maneira fácil de substituir manualmente os metadados de rotação EXIF, se a imagem for salva na orientação correta no MS Windows. No Windows Explorer, clique com o botão direito do mouse no arquivo de imagem e selecione "Girar no sentido horário". Faça isso 4 vezes para girar a imagem completamente e, em seguida, a imagem terá a orientação correta para todos os sistemas. Em seguida, você pode fazer o upload da imagem no seu servidor web.

BenW
fonte
Isto não funcionou para mim. Talvez o Windows Explorer retenha os metadados no Windows 10, mas não os manteve nas versões anteriores?
M Katz
0

Arquivei isso como um bug na Apple através do Bug Reporter da Apple . Se isso for importante para você e você tiver dados de amostra, não será demais ter mais de um relatório sobre o problema. A captura de tela abaixo deve destacar o problema e, na hipótese de um funcionário da Apple olhar para esta postagem, o ID do problema é 11299426.

Comportamento inconsistente de rotação

Aaron
fonte