OpenLayers3 Image gets squashed on some Tablets and phones.

[ahb108]

This seems to happen on certain Apple devices. For example, the skewed image below:

[ahb108]

Scaling large images (decoded image sizes of several megapixels or more) on an iOS device can lead to them being rendered as very squashed because of the way they potentially are sub-sampled by iOS. See:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

This is what currently happens for the photo-masking application (but not the index card scans because the latter are small enough). I have checked and if the photomasking image is made smaller, the problem goes away. On an iOS device, compare:

http://www.ucl.ac.uk/~tcrnahb/tmp/pal.html
and
http://www.ucl.ac.uk/~tcrnahb/tmp/palsmall.html

There are several js scripts to work around these iOS scaling issues. e.g:
https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-ios.js

We could re-scale the image, and adjust the size described in:

new ol.layer.Image({…

but I suspect would need to find and use the original unscaled size for the projection extent:

task.pixelProjection = new ol.proj.Projection({…

to make the polygon-drawing compatible with those done on other devices….
So I am not sure that fixing this is a priority?