data:url() is not working with large images on iPhone

[klizas]

Is is possible to get rid of image conversion to base64?

[klizas]

Here is problem description http://stackoverflow.com/questions/26754786/ios7-not-loading-css-image-with-height-over-1950px

[jackmoore]

Thanks. Ok, I verified the problem and it like it's resolved starting with iOS9. An alternative to using canvas would be to replace the following lines:

canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
img.src = canvas.toDataURL();

With these:

img.width = img.width || img.naturalWidth;
img.height = img.height || img.naturalHeight;
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";

That dataURL is for a 1x1 transparent pixel, just something transparent and valid to serve as the src allowing the background-image to show through. Wheelzoom works by using the original src as the background-image, then changing it using background-position and background-size.

Feel free to make these change in your script, (old versions of wheelzoom used the transparent png like that), but for the current published version I think I want to keep the current code as-is because it avoids having to set the img width and height, which could interfere with responsive sizing.