css – 为什么IE渲染空SVG元素时会冻结布局?

前端之家收集整理的这篇文章主要介绍了css – 为什么IE渲染空SVG元素时会冻结布局?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前正在IE 10和11中遇到一个问题,其中浏览器选项卡不时地悬挂在UI响应工具中的布局上.我是一个团队写一个相当大的knockout.js网络应用程序的一部分,因此确定创建此问题的确切条件非常困难.据我所知,当从页面删除加载指示符 HTML时,浏览器选项卡会在执行布局时挂起,并且某些div和一个空的SVG标记将附加到DOM的位置.

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

以下是IE 11为我提供的美国响应报告.我已经放大了有问题的区域,正如您在图片中看到的那样,布局线程将cpu加速到100%.

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

为什么浏览器选项卡会间歇地冻结/挂起向页面添加空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(注意:所有数据绑定的东西都是针对knockout.js绑定处理程序,它触发上面的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

评论中描述的解决方法至少对我们有用:
你必须设置style =“pointer-events:none;”关于使用要素.
或者只是将其添加到您的CSS:

svg use { pointer-events:none; }

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

原文链接:https://www.f2er.com/css/215713.html

猜你在找的CSS相关文章