On class update, SVG image as background in CSS does not appear in IE11

Question

Problem: On page load, for a button, SVG which is being called in CSS background appears. On some event, I apply a class and to it call another SVG in CSS background. However that new SVG does not appear. If in debugger, I try to toggle the background, it then starts appearing.

What am I missing to get this working in IE11?

In Below picture, we are using <button> tag. On some event, the background SVG is changed.

CSS Code

.buttonIcons{
 .svgicon-fields-add{ background-image:url('../assets/themes/svg/arrow_active.svg');
 width: 16px;
 height: 16px; 
}

On disabled state, below is the CSS

.buttonIcons.disabled{
 .svgicon-fields-add{ background-image:url('../assets/themes/svg/arrow_disabled.svg');
  width: 16px;
  height: 16px; 
}

So initially all buttons are disabled, but if you see the first button needs to show active svg image, but it is not appearing. I can see it in IE11 console, and if in console, I toggle the property, it starts appearing.

The code works fine in Chrome

Thanks in advance for all the suggestions.

SVG file code

<?xml version="1.0" encoding="utf-8"?>
<svg width="16" height="16" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<g>
    <polygon fill="#00a6a0" points="7.6,1.6 6.7,2.4 12.3,8 6.7,13.6 7.6,14.4 14,8   "/>
    <polygon fill="#00a6a0" points="2.6,1.6 1.7,2.4 7.3,8 1.7,13.6 2.6,14.4 9,8     "/>
</g>
</svg>

Answer 1

Based on the small number of views, this is an esoteric case, but I'm having the same problem. I've been on it for days. I also had a double problem where IE would not display the background on toggling the style in developer tools.

I thought it was initially a memory issue, where IE was allocating memory for the icon but not actually putting anything there.

So I applied the SVG as an xml-encoded string directly in the class itself. This solved one instance of an SVG background not appearing, but it didn't solve the problem mentioned here. Furthermore, this allowed me to see the toggle event you mentioned.

So I now believe that it is NOT a memory issue, but an issue with IE10/11's SVG rendering engine. The fact that this problem only happens with certain SVG's reinforces the idea that the IE rendering engine is crapping the bed with certain inputs. It also only happens when a CSS SVG background is being overridden by another class's SVG background.

I thus tried setting the object to display:none, then display:block in the hopes of forcing a re-render of the element. This didn't help. I destroyed the element then rebuilt it and appended it back where it was supposed to go. That didn't work.

To make things even more confusing, I was never able to replicate the problem locally. It would only ever manifest in certain environments, leading me to believe that it is a combination of the browser and some server settings. I have no idea what.

Regardless, the point is that IE is remarkably resilient it not re-rendering what it has rendered. And since the SVG engine is apparently separate from the DOM rendering engine, screwing around with the DOM will have no effect on what the SVG renderer has stored. You have to give it quantifiably different data to force the SVG engine to re-render.

The only solution I found was to have my two CSS classes then give IE different image data than what it found on page load.

.Class1 {
   background-image: url("data:image/svg+xml,image-data...");
}
.Class2 {
   background-image: url("data:image/svg+xml,image-data...");
}

These classes allow default page load states to be covered. Then when JS events change the appearance, instead of changing the class, assign an in-line CSS style with the XML-ified SVG image data with a slight difference. Anything will work. I used an extra space.

onclick="function(){
   element.style.backgroundImage = "url(\"data:image/svg+xml,slightly-different-data...\")"
}

To reiterate, it is an SVG rendering problem that occurs on page load. You can force SVG to re-render the image by giving it slightly different data in-line. I would imagine that you could do the same thing with a third class that contains a reference to a slightly different SVG file from the initial one, but I didn't do this.