question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

@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

image

Windows IE 11

image

Windows Firefox

image

Windows Chrome

image

OS X Chrome

image

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:11 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
psyrendustcommented, Jun 1, 2017

@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

image

Windows IE11 svg to img using data uri, to canvas

image

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

image

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

image

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

image

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

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

image

Windows Edge png to img, to canvas, to pixi

image

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.

0reactions
lock[bot]commented, Jul 15, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

PIXI v4.5.2 using Edge and IE 11 does not allow rendering ...
englercj: I'm having issues rendering textures from a dataURI in IE 11 and Edge. Creating a texture from a png works fine in...
Read more >
PIXI v4.5.2 using Edge and IE 11 does not allow rendering textures ...
@englercj: I'm having issues rendering textures from a dataURI in IE 11 and Edge. Creating a texture from a png works fine in...
Read more >
IE11 Security Error - gl.texImage2D() - Phaser 3 - Discourse
PIXI v4.5.2 using Edge and IE 11 does not allow rendering textures from a dataURI. opened 11:49PM - 30 May 17 UTC. closed...
Read more >
pixi.js-legacy - UNPKG
The CDN for pixi.js-legacy. ... 4, declare namespace PIXI { ... 48, * If elements are not opaque, they will blend with each...
Read more >
PIXI Loader and IE11 compatibility issues
I'm playing with PIXI v4 for a while now (some drawing + drag'n'drop tool) and find myself in trouble when I test my...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found