PIXI v4.5.2 using Edge and IE 11 does not allow rendering textures from a dataURI

@englercj: I’m having issues rendering textures from a dataURI in IE 11 and Edge. Creating a texture from a png works fine in both. I’ve tried to run this with legacy set to true and false. I created a jsfiddle that uses Texture.fromImage() using a png and a data uri. It works fine in other browser, just not IE or Edge.

https://jsfiddle.net/psyrendust/c3ntwfab/

Windows Edge

Windows IE 11

Windows Firefox

Windows Chrome

OS X Chrome

[psyrendust]

@englercj So I did some more digging to try and figure out what is really going on.

Test 1

I originally thought that textures were not rendering because IE 11 was not allowing the canvas element to render with drawImage when using an <img> that has its src attribute set to a data uri that contains svg code. This was breaking for me in IE11, but not Edge.

https://jsfiddle.net/psyrendust/zahs7395/

Windows Edge svg to img using data uri, to canvas

Windows IE11 svg to img using data uri, to canvas

Looking at the inspector in IE11 I found the following error:

Non-default namespace declarations must not have an empty URI.

I fudged the svg a bit and found that removing the following attributes from the svg allowed everything to work in IE11. You can see the results of that in the fiddle in Test 2.

xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"

Test 2

This is the same as Test 1 but with the 4 xmlns attributes removed, which allows everything to work across all browsers: https://jsfiddle.net/psyrendust/3p35624z/

Windows IE11 svg to img using data uri, to canvas

Test 3

Now that I got Test 2 to validate in Windows Edge and IE11 it was time to test it with pixi. Since I already had a canvas element I decided to create a texture using PIXI.Texture.fromCanvas. This seems to break in IE11.

https://jsfiddle.net/psyrendust/kv1jgmcb/

Windows IE11 svg to img using data uri, to canvas, to pixi

Windows Edge svg to img using data uri, to canvas, to pixi

This seems to break in IE11 with a SecurityError on line https://github.com/pixijs/pixi-gl-core/blob/master/src/GLTexture.js#L94

Test 4

Let’s try Test 3 again but swap out the svg with a png.

Windows IE11 png to img, to canvas, to pixi

Windows Edge png to img, to canvas, to pixi

From what I can see, I believe that the SecurityError stems from a tainted canvas. This doesn’t really seem to make sense because the src for the <img> element is from the embedded svg element that is on the page. I’ve tried setting the crossorigin attributes for the <img> and <canvas> elements to anonymous, but that does nothing for IE11. At this point I’m not sure if the issue stems from IE11, from pixi.js, or pixi-gl-core. I could really use some help on pushing this further.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.