http: s18.me/ios.html,iOS chrome& safari throws "SECURITY_ERR: DOM Exception 18: The operation is in...

Use case: Basic Conversion,

#bubble{

width:500px;

height:400px;

border:2px solid black;

z-index:1;

position: static;

overflow:hidden;

}

img{

z-index:-1;

}

$(function() {

$("#btnSave").click(function() {

var node = document.getElementById('bubble');

domtoimage.toPng(node)

.then(function (dataUrl) {

var img = new Image();

img.src = dataUrl;

document.body.appendChild(img);

})

.catch(function (error) {

console.error('oops, something went wrong!', error);

alert('oops, something went wrong!', error);

});

});

});

Does not seem to work on iphone 6 (mobile in general?). Should append the image to dom as expected, and works on desktop browsers.

Chrome version 52.0.2743.84

Safari (ios10.1.1)

Here is a fiddle example. http://jsfiddle.net/8h13tmcj/25/ I am using only images same domain.

UPDATE:

I managed to get the error:

SECURITY_ERR: DOM Exception 18

Not sure how to handle this issue. Any ideas?

UPDATE

I even tried with just a div. no images, nothing. Still shows the same error on mobile browser chrome, safari on iphone.

UPDATE

I did further testing on browserstack.com, and seems like chrome on android is working fine. That means it is just iOS. Can you please help?