本文介绍了IE 11“崩溃"使用动态 SVG 元素时的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我不确定崩溃这个词是否准确描述了正在发生的事情.应用程序进入一种状态,其中元素不再接受鼠标或键盘输入,显示也不会更改以显示悬停样式.但是,当您将鼠标悬停在按钮和输入元素上时,光标图像会相应更改,并且可以使用鼠标滚轮(但只能使用鼠标滚轮)滚动可滚动部分.

当应用程序处于这种状态时,我运行了 UI Responsiveness Profiler,发现没有客户端脚本在运行,只有 IE 的垃圾收集器.经过一周的测试,我最终确定当用户单击由 svg 元素生成的图标时会触发该状态,但仅当该单击触发从 DOM 中删除单击的 svg 元素的函数时才会触发.

这是一个有助于解释/重现问题的代码笔:http://codepen.io/GooeyIdeas/pen/WvpPzP

以及娱乐的最低代码:

//这是一个简单的 *viewmodel* - JavaScript,它定义了 UI 的数据和行为函数 AppViewModel() {var self = this;this.isLocked = ko.observable(false);this.toggleLock = function(){self.isLocked(!self.isLocked.peek())}}ko.applyBindings(new AppViewModel());
svg 使用{光标:十字准线;}SVG{边框:1px 实心 #eeeeee;光标:默认;}SVG:悬停{边框颜色:#dedede;背景:#cecece;}#svg-icons{显示:无;}
<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-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-->

<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,2h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z"></path></符号><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,9zM15.1,9H8.9V7c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1V9z"></path></符号></svg>

有没有人遇到过这种情况?有没有人知道仍然可以让我使用 SVG 'use' 元素的解决方法?我需要澄清什么吗?

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

**编辑看起来这个错误在 Windows 8 PC 上不存在.可以肯定的是,我在我的示例中添加了 CSS,当您将鼠标悬停在 svg use 元素上时,它会将光标更改为十字准线,因为这是您必须单击才能触发崩溃的元素.

解决方案

由于这篇文章的流量不大,我想我会发布一个解决方案:我添加了这个 CSS 规则:

svg 使用 {指针事件:无;}

这并不理想,但它可以防止 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?

*editIt 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?

**editIt 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 元素时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 01:18
查看更多