IE 11“崩溃”使用动态SVG元素时 [英] IE 11 "Crashes" when Using Dynamic SVG Elements

问题描述

我最近为我公司的新html应用程序实现了一个自定义SVG图标控件。不久之后，我们的质量部门开始报告IE 11在使用应用程序时随机崩溃。

我不确定术语崩溃是否准确地描述了正在发生的事情虽然。应用程序进入状态，元素将不再接受鼠标或键盘输入，显示器也不会显示悬停样式。但是，鼠标悬停在按钮上时，光标图像会发生相应的变化，并且可以使用鼠标滚轮（但仅限于鼠标滚轮）滚动输入元素和可滚动部分。

我运行UI响应性分析器，当应用程序处于此状态时，发现没有运行客户端脚本，只是IE的垃圾收集器。经过一周的测试后，我终于确定，当用户点击使用svg元素生成的图标时触发该状态，但只有当该点击触发了一个从DOM中删除点击的svg元素的函数时才会触发。

这是一个代码笔，可以帮助解释/重现问题：
http：// codepen .io / GooeyIdeas / pen / WvpPzP

以及最低休闲代码：

  //这是一个简单的* viewmodel *  - 定义你的UI函数的数据和行为的JavaScript 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;背景：#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>如果您将鼠标悬停在正确的位置，光标将变为十字准线。元素< / DIV>< DIV> <！ -  ko if：isLocked  - > < svg class =ux-icon-svgwidth =24height =24>< use data-bind =click：toggleLockxmlns：xlink =http://www.w3.org / 1999 / xlinkxlink：href =＃locked>< / use>< / svg> <！ -  / ko  - > <！ -  ko ifnot：isLocked  - > < svg class =ux-icon-svgwidth =24height =24>< use data-bind =click：toggleLockxmlns：xlink =http://www.w3.org / 1999 / xlinkxlink：href =＃unlocked>< / use>< / svg> <！ -  / ko  - >< / div>< svg xmlns =http://www.w3.org/2000/svgid =svg-icons> < symbol viewBox =0 0 24 24id =unlocked> <路径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>< ; /路径> < /符号> < symbol viewBox =0 0 24 24id =locked> <路径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 >< /路径> < / symbol>< / svg>  

这之前？有没有人知道一个解决办法，仍然会让我使用SVG'use'元素？我需要澄清什么？

*编辑
似乎有些人不能重现此错误。我想知道是否有其他人可以重现此错误，如果您不能，您运行的是哪个版本的Windows？

**编辑
它看起来像这个bug在Windows 8电脑上不存在。为了确保我将CSS添加到了我的示例中，当您将鼠标悬停在svg use元素上时，它会将光标更改为十字准线，因为这是您必须单击才能触发崩溃的元素。

解决方案

由于这篇文章没有太多流量，我想我会发布一个解决方案：
我加了这个CSS规则：

  svg use {
 pointer-events：none; 
} 
  

这并不理想，但会阻止IE 11锁定，我需要支持这个项目。不过，我希望这篇文章能够帮助未来可能遇到此错误并需要支持旧版IE的其他人。如果有人愿意花时间想出一个更强大的解决方案，我会接受这个职位的答案。

我也应该向微软提交有关此问题的错误报告？

I recently implemented a custom SVG Icon control for my company's new html application. Not long After it was implemented our quality department started reporting that IE 11 randomly "crashes" when using the application.

I am not sure the term crash accurately describes what is happening though. The application gets to a state where elements will no longer accept mouse or keyboard input nor will the display change to show hover styles. However, the cursor image will change appropriately as you hover over buttons and input element and scrollable sections can be scrolled using the mousewheel (but only the mousewheel).

I ran the UI Responsiveness Profiler when the application was in this state and found that there were no client side scripts running, just IE's garbage collector. After a week of testing I finally determined that the state is triggered when the user clicks on an icon generated with the svg element but only when that click fires a function which removes the clicked svg element from the DOM.

Here is a code pen that helps explain/recreate the issue: http://codepen.io/GooeyIdeas/pen/WvpPzP

And the Minimum Code for Recreation:

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

Has anyone encountered this before? Does anyone know of a work around that will still let me use the SVG 'use' element? Do I need to clarify anything?

*edit It seems that some people are not able to reproduce this error. I would like to know if anyone else can reproduce this error and if you can't, what version of windows are you running?

**edit It is looking like this bug does not exist on Windows 8 PCs. To be sure I added CSS to my examples that will change the cursor into a crosshair when you are hovering over the svg use element since that is the element you have to click to trigger the crash.

解决方案

Since there hasn't been much traffic with this post I guess I will post a solution: I added this CSS rule:

svg use {
  pointer-events: none;
}

This is not ideal but it keeps IE 11 from locking up and that is all I am required to support with this project. However I would like for this post to help others in the future who might encounter this bug and do need to support older versions of IE. If anyone is willing to take the time to come up with a more robust solution I will accept that as the answer to this post.

Also should I file a bug report to microsoft regarding this issue?

这篇关于IE 11“崩溃”使用动态SVG元素时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！