Ich habe kürzlich ein benutzerdefiniertes SVG-Symbol-Steuerelement für die neue HTML-Anwendung meines Unternehmens implementiert. Kurze Zeit nach der Implementierung meldete unsere Qualitätsabteilung, dass IE 11 bei Verwendung der Anwendung zufällig "abstürzt".

Ich bin mir nicht sicher, ob der Begriff Crash genau beschreibt, was passiert. Die Anwendung wird in einen Zustand versetzt, in dem Elemente keine Maus- oder Tastatureingaben mehr akzeptieren und die Anzeige sich nicht mehr ändert, um Hover-Stile anzuzeigen. Das Cursorbild ändert sich jedoch entsprechend, wenn Sie den Mauszeiger über die Schaltflächen und das Eingabeelement halten. Scrollbare Bereiche können mit dem Mausrad (aber nur mit dem Mausrad) gescrollt werden.

Ich habe den UI Responsiveness Profiler ausgeführt, als sich die Anwendung in diesem Status befand, und festgestellt, dass keine clientseitigen Skripts ausgeführt wurden, sondern nur der Garbage Collector des IE. Nach einer Testwoche habe ich endlich festgestellt, dass der Status ausgelöst wird, wenn der Benutzer auf ein mit dem SVG-Element generiertes Symbol klickt, aber nur, wenn dieser Klick eine Funktion auslöst, die das angeklickte SVG-Element aus dem DOM entfernt.

Hier ist ein Code-Stift, mit dem Sie das Problem erklären / neu erstellen können:http: //codepen.io/GooeyIdeas/pen/WvpPz

Und der Mindestcode für die Erholung:

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

Hat jemand dies schon einmal angetroffen? Kennt jemand eine Lösung, mit der ich das SVG-Element "use" weiterhin verwenden kann? Muss ich irgendetwas klären?

* edit Es scheint, dass einige Leute diesen Fehler nicht reproduzieren können. Ich würde gerne wissen, ob jemand diesen Fehler reproduzieren kann, und wenn nicht, welche Windows-Version verwenden Sie?

** bearbeiten Es sieht so aus, als ob dieser Fehler auf Windows 8-PCs nicht existiert. Um sicherzugehen, habe ich meinen Beispielen CSS hinzugefügt, das den Cursor in ein Fadenkreuz verwandelt, wenn Sie mit der Maus über das Element svg use fahren, da Sie auf dieses Element klicken müssen, um den Absturz auszulösen.