javascript - missing - IE 11 "cuelga" al usar elementos SVG dinámicos

svg to html

Question

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

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

Ejecuté el UI Responsiveness Profiler cuando la aplicación estaba en este estado y encontré que no había secuencias de comandos 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 ícono generado con el elemento svg, pero solo cuando ese clic desencadena una función que elimina el elemento svg cliqueado del DOM.

Aquí hay un lápiz de código que ayuda a explicar / recrear el problema: http://codepen.io/GooeyIdeas/pen/WvpPzP

Y el Código mínimo para la 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 un trabajo alternativo que me permita utilizar el elemento ''uso'' de SVG? ¿Debo 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 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 en una cruz cuando pasas el cursor sobre el elemento svg use ya que ese es el elemento en el que debes hacer clic para disparar el bloqueo.

Answer 1

Como no ha habido mucho tráfico con esta publicación, creo que publicaré una solución: agregué esta regla de CSS:

svg use {
  pointer-events: none;
}

Esto no es ideal, pero evita que IE 11 se bloquee y eso es todo lo que se requiere para apoyar con este proyecto. Sin embargo, me gustaría que esta publicación ayude a otras personas en el futuro que puedan encontrar este error y que necesiten admitir versiones anteriores de IE. Si alguien está dispuesto a tomarse el tiempo para encontrar una solución más sólida, la aceptaré como respuesta a esta publicación.

¿También debería presentar un informe de error a Microsoft con respecto a este problema?

Answer 2

Me encontré con esto con un <svg> que se agregó o eliminó dinámicamente del DOM con AngularJS y ng-if . La solución aceptada no funcionó para mí. La solución que sí funcionó fue usar ng-show que oculta y muestra el SVG en lugar de agregarlo y eliminarlo del DOM.