Image Distortion - Possible IOS issue

[jawa-the-hutt]

I'm struggling with understanding if the issue I'm seeing is an issue with js-cover-flow or an issue with IOS that is causing images to be distorted. I don't have an android device to test with. I've been able to reproduce this issue on IOS 6.1.3 and 7.0. However, an iPad I had running 5.1.1 did not reproduce the issue.

I have a page that will allow a user to take a picture or upload a picture from their iPhone/iPad. Once the picture is uploaded, it will insert the picture into the coverflow.

-- If I take the picture or upload from the device's photo library with an iPhone, the image gets distorted, but the iPhone will display pictures taken with the iPad normally.

-- If I take a picture or upload from the device's photo library with the iPad, the picture does not get distorted, but the iPad will display images taken by the iPhone in the distorted manner.

-- If I upload a picture from my desktop (doesn't matter if it's IE. FF, or Chrome) then the picture is displayed normally. To top it off, pictures taken with the iPhone that display distorted on the iPhone or iPad will display normally in the desktop browser.

Here is what it looks like from a Desktop Browser:

Here is what it looks like from an iPhone or iPad running IOS 6.x and above. The last picture on the right was taken from the iPad.

I'm leaning towards this being an IOS issue, but I don't know enough about how the plugin operates to say for sure.

[jawa-the-hutt]

In doing a lot of testing and research I came across this SO: http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios.

If this is related to the issue I'm seeing then this is an issue with IOS 6 & 7. In one of the answers on SO, there was a link to this: https://github.com/stomita/ios-imagefile-megapixel

It appears there may be away to adjust the canvas rendering to help mitigate this issue. I'm going to do some more testing over the next couple of days and see if I can determine this is the issue and if so, if there's a way to integrate the fix into js-cover-flow.

[jawa-the-hutt]

I have confirmed this is an IOS 6.x and above bug. I have forked js-cover-flow (https://github.com/jawa-the-hutt/js-cover-flow) and have inserted a series of fixes to address the issue. The main source of the fixes has been adapted from https://github.com/stomita/ios-imagefile-megapixel

I've also added an image orientation detection option that will detect if an image is displayed at an incorrect orientation. It requires exif.js and binaryajax.js from here: http://www.nihilogic.dk/labs/exif/. There is now a true/false option in the coverflow setup function that will determine if this routine is used. The default is set to false.

In my fork, I've also added a Firefox browser detection statement that will address the issue I reported here: #17. This fix is more for my personal needs in the project I'm working on, so just be aware of this in case you want to include or exclude it from the master.

This is my first fork of a project so I'm not sure what the proper etiquette here is in terms of having any of the changes committed to the master. Let me know and I'll adjust.

[luwes]

Thanks for the contributions. I guess this can be closed now.
It was only affecting cover images > 1.5Mb.