IE 11 "Crashes" when Using Dynamic SVG Elements

Question

I recently implemented a custom SVG Icon control for my company's new html application. Not long After it was implemented our quality department started reporting that IE 11 randomly "crashes" when using the application.

I am not sure the term crash accurately describes what is happening though. The application gets to a state where elements will no longer accept mouse or keyboard input nor will the display change to show hover styles. However, the cursor image will change appropriately as you hover over buttons and input element and scrollable sections can be scrolled using the mousewheel (but only the mousewheel).

I ran the UI Responsiveness Profiler when the application was in this state and found that there were no client side scripts running, just IE's garbage collector. After a week of testing I finally determined that the state is triggered when the user clicks on an icon generated with the svg element but only when that click fires a function which removes the clicked svg element from the DOM.

Here is a code pen that helps explain/recreate the issue: http://codepen.io/GooeyIdeas/pen/WvpPzP

And the Minimum Code for Recreation:

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI  function AppViewModel() {      var self = this;      this.isLocked = ko.observable(false);      this.toggleLock = function(){        self.isLocked(!self.isLocked.peek())      }  }    ko.applyBindings(new AppViewModel());

svg use{    cursor: crosshair;  }  svg{    border: 1px solid #eeeeee;    cursor: default;  }  svg:hover{    border-color: #dedede;    background: #cecece;  }  #svg-icons{    display: none;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div>The cursor will change into a crosshair if you are hovering over the correct element.</div>  <div>    <!-- ko if: isLocked    -->    <svg class="ux-icon-svg" width="24" height="24"><use data-bind="click: toggleLock" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#locked"></use></svg>    <!-- /ko -->    <!-- ko ifnot: isLocked -->    <svg class="ux-icon-svg" width="24" height="24"><use data-bind="click: toggleLock" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#unlocked"></use></svg>    <!--/ko-->  </div>    <svg xmlns="http://www.w3.org/2000/svg" id="svg-icons">    <symbol viewBox="0 0 24 24" id="unlocked">      <path d="M18,9h-1V7c0-2.8-2.2-5-5-5S7,4.2,7,7h1.9c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1v2H6c-1.1,0-2,0.9-2,2v9c0,1.1,0.9,2,2,2               h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z"></path>    </symbol>    <symbol viewBox="0 0 24 24" id="locked">      <path d="M18,9h-1V7c0-2.8-2.2-5-5-5S7,4.2,7,7v2H6c-1.1,0-2,0.9-2,2v9c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z               M15.1,9H8.9V7c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1V9z"></path>    </symbol>  </svg>

Has anyone encountered this before? Does anyone know of a work around that will still let me use the SVG 'use' element? Do I need to clarify anything?

*edit It seems that some people are not able to reproduce this error. I would like to know if anyone else can reproduce this error and if you can't, what version of windows are you running?

**edit It is looking like this bug does not exist on Windows 8 PCs. To be sure I added CSS to my examples that will change the cursor into a crosshair when you are hovering over the svg use element since that is the element you have to click to trigger the crash.

Answer 1

Since there hasn't been much traffic with this post I guess I will post a solution: I added this CSS rule:

svg use {   pointer-events: none; } 

This is not ideal but it keeps IE 11 from locking up and that is all I am required to support with this project. However I would like for this post to help others in the future who might encounter this bug and do need to support older versions of IE. If anyone is willing to take the time to come up with a more robust solution I will accept that as the answer to this post.

Also should I file a bug report to microsoft regarding this issue?