Недавно я внедрил пользовательский элемент управления SVG Icon для нового html-приложения моей компании. Вскоре после того, как он был внедрен, наш отдел качества начал сообщать, что IE 11 случайно «вылетает» при использовании приложения.

Я не уверен, что термин «авария» точно описывает происходящее. Приложение переходит в состояние, в котором элементы больше не будут воспринимать ввод с помощью мыши или клавиатуры, а также не будут меняться, отображая стили наведения. Однако изображение курсора будет соответствующим образом меняться при наведении курсора на кнопки и элемент ввода, а прокручиваемые участки можно прокручивать с помощью колесика мыши (но только колесика мыши).

Я запустил UI Responsiveness Profiler, когда приложение находилось в этом состоянии, и обнаружил, что на нем не выполняются сценарии на стороне клиента, только сборщик мусора в IE. После недели тестирования я наконец определил, что состояние срабатывает, когда пользователь нажимает на иконку, созданную с помощью элемента svg, но только тогда, когда этот щелчок запускает функцию, которая удаляет нажатый элемент svg из DOM.

Вот кодовая ручка, которая помогает объяснить / воссоздать проблему:http://codepen.io/GooeyIdeas/pen/WvpPzP

И минимальный код для отдыха:

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

Кто-нибудь сталкивался с этим раньше? Кто-нибудь знает обходной путь, который все еще позволит мне использовать SVG-элемент use? Нужно ли что-то уточнить?

* edit Кажется, что некоторые люди не могут воспроизвести эту ошибку. Я хотел бы знать, если кто-то еще может воспроизвести эту ошибку, и если вы не можете, какую версию Windows вы используете?

** edit Похоже, что эта ошибка не существует на ПК с Windows 8. Чтобы быть уверенным, я добавил CSS к своим примерам, который изменит курсор на перекрестие, когда вы наводите курсор на элемент использования svg, так как это элемент, на который вы должны нажать, чтобы вызвать сбой.