Недавно я реализовал пользовательский элемент управления SVG для нового приложения html. Вскоре после этого наш отдел качества начал сообщать, что IE 11 случайно "сбой" при использовании приложения.
Я не уверен, что термин crash точно описывает, что происходит. Приложение переходит в состояние, в котором элементы больше не будут принимать ввод мыши или клавиатуры, а также не будут отображаться на дисплее, чтобы отображать стили наведения. Тем не менее, изображение курсора будет соответствующим образом изменяться при наведении курсора на кнопки и элемент ввода, а прокручиваемые секции можно прокручивать с помощью колеса мыши (но только с колесиком мыши).
Я запускал профилировщик ответной реакции пользовательского интерфейса, когда приложение находилось в этом состоянии, и обнаружило, что сценариев на стороне клиента не работает, только сборщик мусора 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>