IE11 corrupts SVG images when their drawing happens very quickly. This example draws a random selection of cards at a 30ms interval. (Decreasing the interval makes the cards less likely to be drawn.) Once the ‘Stop’ button is pressed, some images keep their corrupted state (their image contents are not visible) while others are displayed fine.
Once an image is corrupted, it won’t be visible for any other element it is used for (e.g. as background-image for another element).
This issue doesn't occure with IE 10, latest Chrome, Firefox or Safari.
So far, we discovered two ways to ‘heal’ these corrupted images:
object tag that holds the SVG of a corrupted image will trigger a redraw of all occurences of that SVG consequently fixing all corrupted representations of that SVG. Removing the object tag at a later time has no more effect.object, img or div with the SVG as background-image) and removing it after a timeout will prevent the problem from occuring later on. In our tests, the duration of the timeout was important — having a timeout shorter than 1000ms wouldn’t fix the problem sometimes. This workaround can be seen here.