3

I have this annoying problem where Safari Mobile rotates the pictures I take with the phone camera. The weird thing is that it only happens while in portrait mode. Here's a code sample: http://jsfiddle.net/Kazpp/

As you can see I'm adding the image as background of the preview div and setting the background-size property as cover so I can keep the image aspect ratio and fill the whole div area with the image. I also tried adding an image element as children of my div, but that didn't worked either.

Does anyone have any clue on what's going on here?

Ps.: I'm having this issue on iOS 6.0. Didn't tried another iOS version.

  • Turns out `background-size: cover` isn't very stable over mobile devices (specially iOS). I didn't wanted that but solved the issue by using JavaScript. There's this plugin called [`Backstretch`](http://srobbin.com/jquery-plugins/backstretch/) that I've ported to work with [`Zepto`](http://zeptojs.com)(which I'm using as a replacement for [`jQuery`](http://jquery.com)). [Here's a fully working example](http://codepen.io/rafaelrinaldi/full/gkqHa). –  Sep 08 '13 at 03:45

1 Answers1

1

You're running into an Exif orientation issue JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

As answered in that post you can use this library to check image orientation and rotate accordingly https://github.com/blueimp/JavaScript-Load-Image

Community
  • 1
  • 1
Carlos Feliciano Barba
  • 93
  • 2
  • 5