Recientemente implementé un control de icono SVG personalizado para la nueva aplicación html de mi empresa. No mucho después de que se implementó, nuestro departamento de calidad comenzó a informar que IE 11 se "bloquea" al azar al usar la aplicación.

Sin embargo, no estoy seguro de que el término bloqueo describa con precisión lo que está sucediendo. La aplicación llega a un estado en el que los elementos ya no aceptarán entradas del mouse o del teclado, ni la pantalla cambiará para mostrar estilos de desplazamiento. Sin embargo, la imagen del cursor cambiará apropiadamente cuando pase el mouse sobre los botones y el elemento de entrada, y las secciones desplazables se pueden desplazar usando la rueda del mouse (pero solo la rueda del mouse).

Ejecuté el UI Responsiveness Profiler cuando la aplicación estaba en este estado y descubrí que no había scripts del lado del cliente ejecutándose, solo el recolector de basura de IE. Después de una semana de pruebas, finalmente determiné que el estado se activa cuando el usuario hace clic en un icono generado con el elemento svg, pero solo cuando ese clic activa una función que elimina el elemento svg clicado del DOM.

Aquí hay una pluma de código que ayuda a explicar / recrear el problema:http://codepen.io/GooeyIdeas/pen/WvpPzP

Y el Código Mínimo para Recreación:

// 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>

¿Alguien encontró esto antes? ¿Alguien sabe de una solución que todavía me permita usar el elemento SVG 'use'? ¿Necesito aclarar algo?

* editar Parece que algunas personas no pueden reproducir este error. Me gustaría saber si alguien más puede reproducir este error y, si usted no puede, ¿qué versión de Windows está ejecutando?

** editar Parece que este error no existe en las PC con Windows 8. Para estar seguro, agregué CSS a mis ejemplos que cambiarán el cursor a una cruz cuando esté pasando el cursor sobre el elemento de uso svg, ya que ese es el elemento en el que debe hacer clic para activar el bloqueo.