Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript IE 11“;撞车“;使用动态SVG元素时_Javascript_Html_Svg_Knockout.js_Internet Explorer 11 - Fatal编程技术网

Javascript IE 11“;撞车“;使用动态SVG元素时

Javascript IE 11“;撞车“;使用动态SVG元素时,javascript,html,svg,knockout.js,internet-explorer-11,Javascript,Html,Svg,Knockout.js,Internet Explorer 11,我最近为我公司的新html应用程序实现了一个自定义SVG图标控件。实施后不久,我们的质量部门开始报告IE 11在使用应用程序时随机“崩溃” 不过,我不确定崩溃这个词是否准确地描述了正在发生的事情。应用程序将进入一种状态,元素将不再接受鼠标或键盘输入,也不会更改显示以显示悬停样式。但是,当您将鼠标悬停在按钮和输入元素上时,光标图像将发生相应的变化,可以使用鼠标滚轮(但仅限于鼠标滚轮)滚动可滚动的部分 当应用程序处于这种状态时,我运行了UI响应分析器,发现没有运行客户端脚本,只有IE的垃圾收集器。经

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

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

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

这是一支代码笔,有助于解释/再现问题:

以及康乐活动的最低守则:

//这是一个简单的*viewmodel*-JavaScript,用于定义用户界面的数据和行为
函数AppViewModel(){
var self=这个;
this.isLocked=ko.可观察(假);
this.toggleLock=函数(){
self.isLocked(!self.isLocked.peek())
}
}
应用绑定(新的AppViewModel())
svg的使用{
光标:十字线;
}
svg{
边框:1px实心#eeeeee;
游标:默认值;
}
svg:悬停{
边框颜色:#dedede;
背景:#塞切奇;
}
#svg图标{
显示:无;
}

如果将光标悬停在正确的元素上,光标将变为十字线。

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

svg use {
  pointer-events: none;
}
这是不理想的,但它使IE 11从锁定,这是所有我需要支持这个项目。然而,我希望这篇文章能够帮助将来可能遇到这个错误的人,并且确实需要支持旧版本的IE。如果有人愿意花时间想出一个更健壮的解决方案,我会接受这篇文章的答案


我还应该就此问题向microsoft提交错误报告吗

我遇到了一个
,它是通过AngularJS和
ng if
从DOM中动态添加或删除的。被接受的解决方案对我不起作用。有效的解决方案是使用
ngshow
,它隐藏和显示SVG,而不是从DOM中添加和删除SVG。

Hi。只是想让你知道,我已经在两台不同的电脑上测试过了,还请了其他几个人也来试试。我们中没有人能够重现你所描述的问题。考虑到你花了这么长时间来诊断和描述它,显然存在一个问题,但我只能猜测,还有一些你没有提到的问题。我建议您在上提交一个bug,并包括一个附在bug上的标签内容进程(私下)的挂起转储。只是想澄清一下:您是在使用codepen站点还是min标记进行测试?另外,您正在测试哪个版本的windows?我们运行的是64位windows 7,我们的质量团队发现IE 11在不同的操作系统上存在不同的问题,也许这就是其中之一?我刚刚在办公室测试了10台不同的PC,并能够在所有这些PC上重现“崩溃”。我运行了InternetExplorer11(没有附加组件)。这似乎是可能的。我确实更新了fiddle和代码片段,以确保它被正确测试。不知道为什么不考虑在use元素上添加click绑定。。。如果您不介意再次检查更新的示例,我将不胜感激!微软将停止开发IE/edge,这将有助于全世界!我一生中有那么多的无聊时光。。。谢谢你的解决方案!似乎有些人无法重现这种错误。我想知道是否有人可以重现这个错误,如果你不能,你运行的是什么版本的windows?我无法从小提琴上重现这个问题,在win server 8.1 IE11中运行,Windows 8 PC上似乎不存在此缺陷。我在示例中添加了CSS,当您将光标悬停在svg use元素上时,它会将光标变成十字线,因为您必须单击该元素才能触发崩溃。只是为了确保我们不会错过点击您使用的win机器?我现在可以确认win 7机器上的错误,虽然我最初没有IE 11。但就解决办法而言,我不知道。假设您必须使用,为什么不创建两个不同的svg图标并手动切换呢?这并不理想,但它会阻止问题停止页面的其余部分。幸运的是,您显然不需要使用“ng if”来隐藏SVG元素。有时它很有用,因为它实际上删除了隐藏的标记,并允许某些CSS规则正常工作。如果是这种情况,我建议将SVG元素包装在带有类“dynamic SVG wrapper”的“div”或“span”标记中。将触发切换SVG图标显示的事件分配给包装器元素。然后创建此CSS规则:'.dynamic svg wrapper svg{pointer events:none;}'您是否可以使用您正在使用的图标更新您的答案,该图标也会导致此错误,但无法使用CSS修复程序?