Promises from images never resolving in IE11

[HenryKeen]

I have a chart with a watermark configured, the image is configured in the layout so that it is rendered in the g.layer-above g.imagelayer div. The image loads and renders fine. The problem is that the promise returned from the newPlot function never resolves when using IE11.

plotly.newPlot(elem).then(function(){
    //never hit
});

I've narrowed it down to this line where the load event never fires:

I expect doing something like this is what was intended:

            img.onerror = errorHandler;
            img.onload = function() {
                var canvas = document.createElement('canvas');
                canvas.width = this.width;
                canvas.height = this.height;

                var ctx = canvas.getContext('2d');
                ctx.drawImage(this, 0, 0);

                var dataURL = canvas.toDataURL('image/png');

                thisImage.attr('xlink:href', dataURL);
                resolve(); //Resolve here instead after setting the data url
            };

            thisImage.on('error', errorHandler);

            img.src = d.source;

Would you be willing to accept a pull request?

[etpinard]

Thanks for the report.

I'm a little confused. If I understand correctly: IE11 doesn't trigger a load event? But IE11 does display the image correctly?

[HenryKeen]

Yes, on this line the resolve function is never called.

thisImage.on('load', resolve); //Resolve is never invoked

[etpinard]

Ok. Is that a known IE11 bug? Can that be reproduced outside of plotly.js?

[HenryKeen]

It appears its a problem with IE11, some more details on stack overflow - Trap the “Image” loading event on an SVG element in IE11

[etpinard]

It appears its a problem with IE1

Yikes. Something like http://stackoverflow.com/a/40082216/4068492 sounds more robust.

[HenryKeen]

Yea I saw that post, we're already doing something similar, thought we could add the resolve call at the bottom of this function:

img.onload = function() {
                var canvas = document.createElement('canvas');
                canvas.width = this.width;
                canvas.height = this.height;

                var ctx = canvas.getContext('2d');
                ctx.drawImage(this, 0, 0);

                var dataURL = canvas.toDataURL('image/png');

                thisImage.attr('xlink:href', dataURL);


                resolve(); //Resolve here instead
            };

[HenryKeen]

@etpinard do you run your tests in different browsers in CI? I'm trying to add a failing test for this but it would basically be pointless if tests are never run in IE11

[HenryKeen]

hi @etpinard I have a pull request to my own fork. Do you mind giving it a review?

[etpinard]

fixed in #1691