React: SVG image onLoad event not getting dispatched on IE11

Created on 3 Oct 2017  ·  5Comments  ·  Source: facebook/react

SVG image element is not getting onLoad event dispatched on IE11

Example:
https://codepen.io/sahid/pen/NaaRzX

Tested with React 15.1 and 16.0

DOM Wontfix SVG Bug

Most helpful comment

I am not sure what's going on here, but some research suggests there are a few oddities on the IE11 image tag. Practically I cannot get the onLoad event to work at all in js in IE11 (see codepen). Adding an inline onload="alert('here')" in plain markup does work but that's all I've been able to get to work.

There a scant fixes i could find online and the one here is supppper ugly and probably not tenable. Any insight @nhunzaker ? you are the resident svg guru

All 5 comments

I am not sure what's going on here, but some research suggests there are a few oddities on the IE11 image tag. Practically I cannot get the onLoad event to work at all in js in IE11 (see codepen). Adding an inline onload="alert('here')" in plain markup does work but that's all I've been able to get to work.

There a scant fixes i could find online and the one here is supppper ugly and probably not tenable. Any insight @nhunzaker ? you are the resident svg guru

Gah, Sorry! I'm just getting to this doing some testing for another PR and I stumbled upon this via Google 😵.

I can't get IE or Edge to load the SVG image event, _period_ using the following test:
https://codepen.io/nhunzaker/pen/babXLO

I can't find a solution researching (googling) online either, other than the recommendation you've suggested to use a new Image() proxy.

I'd be comfortable closing this one out and writing it off as a browser bug. It's lame, but I'm not super into hacking an image tag into SVG (and worried about edge cases if used as a general solution)

@gaearon, @jquense what do you think?

yeah I think the cost of the workaround is too much. I'm comfortable with this being a "won't fix" if ya'll are

I'm okay with that.

Indeed @nhunzaker Image class was the workaround

Was this page helpful?
0 / 5 - 0 ratings