Kinetic.Image scaling wrong on iPhone (IOS 7)

[perholmang]

The following error seems to only happen on a real iPhone (in the IOS Simulator it works as expected).

Adding an image to a stage and scaling it (either using image.setSize() or image.setScale() draws the image wrong, the proportions are messed up. For example: drawing a 2448x3264-sized image using image.setSize(300,400) or setScale(0,12, 0.16) which should render the image proportionally correct, shows the image at something around 300x40. Using using setSize(300, 900) however, the image looks ok.

Tested on a iPhone 5 with IOS 7 and KineticJS v4.7.1 2013-09-23.

[mpchadwick]

I am having a similar issue here. I have noticed it on both iOS 7.0.2 mobile safari and the iOS simulator on OS X 10.8.5 with KineticJS v4.7.2.

Visit this link on your iPhone with iOS 7. width and height are being scaled proportionately, which works fine on most browsers. But in iOS 7 mobile safari the image gets squished.

http://jsfiddle.net/Ju6YT/17/.

Is this a bug with Safari on iOS 7? If so, are there any ideas for a workaround?

[ericdrowell]

I can look into this when I get a chance (won't be for awhile though, unless someone else from the team gets a chance). It's probably pixel ratio related. As a work around, you can set Kinetic.pixelRatio = 1. You can also use the Kinetic.UA object if you need browser or device dection.

[mpchadwick]

It seems that there is a known issue with mobile Safari vertically squashing images when they get past a certain threshold. It actually has nothing to do with scaling the image. The image will get squashed at even if it is not scaled.

It has been an issue since iOS6. It is mentioned in the following threads on Stack Overflow...

http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
http://stackoverflow.com/questions/12554947/mobile-safari-renders-img-src-dataimage-jpegbase64-scaled-on-canvas/12615436#12615436

There was actually a library developed to deal with the issue (and an issue with image sub-sampling) here...
https://github.com/stomita/ios-imagefile-megapixel

I think it would be nice if KineticJS took care of this issue for you. @ericdrowell do you agree? If so I'd like to take a shot at building it in.

[ericdrowell]

Thanks for looking into this! Not sure if I'm entirely sold on bringing in 200 lines of JS to fix a problem with iOS 6 and 7 for very large images. I'll think on it

[mpchadwick]

I know that many won't run into this issue.

I am using KineticJS in a Phonegap app that allows users to add images to the canvas from their file system. The iPhone 5 camera takes photos at 2448 x 3264. This could also happen with mobile web apps that allow users to upload files from their iPhones and add them to the canvas.

Also, I don't think we will need the entire library. We should only need to run the image through the detectVerticalSquash() function, and then use the return value to fix any issue. See this answer to one of the Stack Overflow threads above...

http://stackoverflow.com/a/17086329

I'm thinking it might also make sense to only do this if the User Agent indicates iOS 6 or iOS7.

[ericdrowell]

Let's do it. Would you like to submit a pull request? You can use Kinetic.UA to detect the user agent

[mpchadwick]

I'll aim to submit a pull request by the end of the weekend. Thanks! 😃

[valeroAlbatera]

Sorry...Im having the same problem...any idea how fix finally the problem in iphone 5 or ios 7??

thanks!

[scheng2013]

Hi guys, what's the plan on fixing this issue? We need IOS. Thanks.

[ericdrowell]

this will make it to the next release, which will be later this month, or early December. The suggested fixes in this thread are on the right track, if you need a quick fix.

[valeroAlbatera]

Hi ericdrowell, I see that there are a new version 4.7.4 for kinetics, this version solves the problem with canvas ios6 & ios 7 ??
Regards

[NachoVarga]

I found that the proposed solution on stackoverflow only worked when you displayed the whole image, but not if you displayed only part of the image - in that case, the image got displaced. I edited the answer with a corrected version:
http://stackoverflow.com/a/17086329/3195597
You might want to correct the implementation in Kinetic.js as well ... :-)

[icaliman]

I am having this issue in Kinetic@5.1.0, on iPhone 3GS, iOS 6.1.6.

[lavrton]

@icaliman look there #654 (comment)