EXIF Orientation Issue in Safari Mobile

The webkit browser is rotating the images before you upload them based on the EXIF data then it gets applied again by your app. We were able to confirm this on new (81) version of Chrome and Mobile Safari on 13.4. then the app is rotating them further and it gets twisted.

We also stumbled upon this when our mobile suddenly behaved differently and finally find the root cause of this.

Both WebKit (iOS) and Android (Chrome) have just recently changed the default behavior of the image-orientation CSS propterty. While it was none before, it is now from-image. This means: Before, they ignored the EXIF data of an image by default, while they are now using it to auto-correct the image. Which break our own auto-correction based on the exifreader library.

Here are some relevant links:

• https://www.fxsitecompat.dev/en-CA/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/

• https://bugs.webkit.org/show_bug.cgi?id=89052

Funny enough, also the Slack team seems to have run into this:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1634180

Fortunately, the author of the exifreader library (who just some weeks later ran into the same problems) also guided me to a way to detect the behavior. You can find his answer here:

• https://github.com/mattiasw/ExifReader/issues/99#issuecomment-640217716

I also noticed that Modernizr has a test for this, so I am actually using a custom modernizr build now to detect the browser behavior.