gpt4 book ai didi

css - 为什么 IE 在渲染空 SVG 元素时卡住布局?

转载 作者:技术小花猫 更新时间:2023-10-29 11:03:17 24 4
gpt4 key购买 nike

我目前在 IE 10 和 11 中遇到一个问题,即浏览器选项卡时不时地卡在 UI 响应工具的布局上。我是编写相当大的 knockout.js 网络应用程序的团队的一员,因此确定造成此问题的确切条件非常困难。据我所知,当从页面中删除加载指示器 HTML 并将一些 div 和一个空的 SVG 标记附加到 DOM 的位置时,浏览器选项卡在执行布局时挂起。

我已经确定空的 SVG 标签是罪魁祸首,但我不知道为什么而且我无法从页面中删除该标签,因为它是 D# 的重要元素我正在尝试创建的数据可视化。

这是 IE 11 提供给我的美国响应报告。我放大了问题区域,正如您在图片中看到的那样,布局线程使 CPU 达到 100%。

enter image description here

在进入代码示例之前,我的问题是:

为什么浏览器选项卡会因向页面添加空 SVG 元素而间歇性卡住/挂起?

根据我对减少浏览器回流的研究,HTML 通过 javascript 以尽可能少的方式附加到 DOM:

var contentHTML = "";
contentHTML += '<div class="axis-title y-axis-title">' + renderString(bindingData.yAxis.title) + "</div>";
contentHTML += '<div class="' + CANVAS_CLASS + '"></div>';
contentHTML += '<svg class="x-axis"></svg>'; // The problematic element

element.innerHTML = contentHTML;

这会产生以下 HTML(注意:所有数据绑定(bind)内容都用于 knockout.js 绑定(bind)处理程序,这会触发上面的 JS):

<div class="chart" data-bind="
barChart: {
data: rowData,
categoryTextKey: 'label',
valueKey: 'keyOnObject',
xAxis: {
title: 'xAxisTitle',
domain: [-1, 1]
},
yAxis: {
title: 'yAxisTitle'
},
onClick: onLabelClick,
formatValueText: formatPercentage
}
"></div>
<div class="axis-title y-axis-title">Y Title</div>
<div class="chart-canvas"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="x-axis" />
<div class="axis-title x-axis-title">X Title</div>
</div>

最后,我还使用 flexbox CSS 规则来布置我的 HTML。我不确定这是否会影响这个问题,但这里是 CSS 以防它有帮助:

.chart {
.flexbox();
.flex-direction(column);
height: 100%;
width: 100%;

.chart-label-click {
cursor: pointer;
}

.chart-header,
.axis-title,
.x-axis {
.flex-grow(0);
.flex-shrink(0);
}

.chart-canvas {
.flex-grow(1);
.flex-shrink(1);

overflow-x: hidden;
overflow-y: auto;
width: 100%;
}

.chart-canvas svg {
display: block;
width: 100%;
}

.axis-title {
font-weight: bold;
}

.x-axis {
.flexbox();
.flex-grow(0);
.flex-basis(20px);

margin-bottom: 5px;
overflow: visible;
width: 100%;
}

.x-axis line,
.x-axis path {
fill: none;
stroke: #d1d1d1;
stroke-width: 1px;
shape-rendering: crispEdges;
}
}

感谢您提供的任何帮助。我不确定如何解决这个问题,因为它在我们应用程序的一部分中是间歇性的,而且我们的代码库非常大,无法找出其他文件中可能也导致此问题的代码的确切组合。

最佳答案

所描述的问题似乎是这个错误: https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom

评论中描述了一种至少对我们有用的解决方法:您必须在 use 元素上设置 style="pointer-events: none;"。或者简单地将其添加到您的 CSS 中:

svg use { pointer-events:none; }

但请注意,这也会禁用在 use 元素上触发的任何鼠标事件。

关于css - 为什么 IE 在渲染空 SVG 元素时卡住布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25274694/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com