我最近为我公司的新html应用程序实现了一个自定义SVG Icon控件.不久它实施后,我们的质量部门开始报告IE 11在使用应用程序时随机"崩溃".
我不确定崩溃一词是否准确地描述了发生了什么.应用程序进入一种状态,其中元素将不再接受鼠标或键盘输入,也不会显示更改为显示悬停样式.但是,当您将鼠标悬停在按钮上时,光标图像将发生相应的变化,输入元素和可滚动部分可以使用鼠标滚轮滚动(但只能滚动鼠标滚轮).
当应用程序处于此状态时,我运行了UI Responsiveness Profiler,发现没有运行客户端脚本,只有IE的垃圾收集器.经过一周的测试后,我终于确定当用户单击使用svg元素生成的图标时触发状态,但仅当该单击触发一个从DOM中删除单击的svg元素的函数时.
这是一个有助于解释/重新创建问题的代码笔: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 …