pixi or pixi-legacy 5.2.2: CanvasGraphicsRenderer.js (384,5) error with setTransform in ie11

[afarber]

Good evening,

after upgrading to

<SCRIPT TYPE="text/javascript" SRC="//cdn.jsdelivr.net/npm/pixi.js@5.2.2/dist/pixi.min.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="//cdn.jsdelivr.net/npm/pixi.js-legacy@5.2.2/dist/pixi-legacy.min.js"></SCRIPT>

my not too complicated word game unfortunately no more works with Internet Explorer 11, while it still works with Chrome, Safari, Firefox (tested on macOS and Win10):

Environment

• pixi.js version: 5.2.2
• Browser & Version: IE 11
• OS & Version: Win 10
• Running Example: https://ok.ru/game/slova.de (sorry for non-English language and inconvenient links on social networks) - this is where the bug sometimes shows up.

There are also other links, but I haven't seen the bug triggered there yet: https://slova.de/words/google/ or https://apps.facebook.com/slova-farbera/

[bigtimebuddy]

You're right, looks like setTransform API is not supported:
https://caniuse.com/#feat=mdn-api_canvaspattern_settransform

That was introduced by @ivanpopelyshev in #6367 to support fill and line texture fills in Graphics.

I'm not sure what the best solution is. I think we should check for pattern.setTransform in that function and bail if we don't support, but will look weird on IE 11. Thoughts?

[ivanpopelyshev]

Starange, I thought I checked for it.. oh wait i checked for SVGMatrix. So, IE11 does have SVGMatrix but doesnt have setTransform.

https://github.com/pixijs/pixi.js/blob/dev/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js#L344

Oh wait,it seems that I forgot return there too :) even if SVGMatrix is missing , this code will be called at least one time.

[spacecowgoesmoo]

This bug was preventing my game's pixi canvas from displaying in IE11 as well. Same error message in the console. Based on the timestamp listed in #6367, I downgraded from PixiJS 5.2.3 to 5.2.1 and that solved it for now.

[bigtimebuddy]

@spacecowgoesmoo can you try this build https://pixijs.download/fix-canvas-settransform/pixi-legacy.js and see if it fixes your problem?

[spacecowgoesmoo]

That test build solved it as well.

[bigtimebuddy]

Awesome. We'll get that merged in ASAP. Thanks for your help