How can I force iOS safari to ignore EXIF rotation?

Question

It seems we have an issue that images on the desktops are displaying correctly upright, but on an iPad they are being rotated to landscape. Upon further investigation it seems that the iPad looks at the rotation information from EXIF data on the image and determining it should be displayed in landscape instead of portrait (which is what it really needs to be).

Is there any way to handle this without downloading all thousands and thousands of images, stripping EXIF data and re-uploading it to our cloud provider?

Answer 1

This is extremely strange, but for some reason - when you position an image absolutely above a video element (even an empty video tag) - then an image with EXIF rotation does not rotate!

<video></video>
<img src="url.jpg" style="position:absolute;top:0;left:0" />

Tested on IOS 5.1 Iphone 4. (I hope no one will file this as a bug! ;) ).

Answer 2

Using jQuery, it's alot shorter, HTML structure:

<a href="foo" style="width:100px; height:100px;">
   <img src="bar" style="position:absolute; width:100px; height:100px; top:0; left:0;">
</a>

Javascript:

setTimeout($.proxy(function(){
   this.css("position", "");
}, $('<video style="visibility:hidden; position:absolute; width:1px; height:1px">').before("img")), 0);

Note: The timeout prevents display errors where positions are incorrect sometimes.

Works like a charm on iOS 7.1, 7.0 and 6.1!