How to stop IE needlessly calculating SVG element widths when calculating an ancestor's offsetWidth?

问题

I've got a function which needs to check the current actual pixel width of a % width element in a widget. On normal browsers, it works fine, on IE (all versions including IE11), it's normally fine; but when the widget is placed on a responsive page with a fairly normal level of complexity with many parent divs some also with % width, IE locks up and takes half a second or more simply to calculate one simple element's width, and then starts re-rendering like crazy with CPU usage exceeding 100% for long periods (other browsers take only a few miliseconds).

I've seen many comments that width and height calculations in IE are notorious for being slow, typically when dealing with many %-based widths; for example:

the browser-native offsetWidth... is known to be excruciatingly slow in IE in some scenarios (such as when interacting with a large table)

From the Developer Tools UI Responsiveness panel, I've managed to track it down to seemingly random individual elements within an SVG. When I expand that green rectangle all the way, 95%+ of it is just one unremarkable element in an SVG map containing 200+ elements:

There should be no need for IE to look at the contents of the SVG at all - an SVG path contained in an svg element surely can't impact on the width or height of an ancestor. Worse, after this, it does a lot of unnecessary re-rendering, including (I believe) each SVG element, even though nothing I'm doing should even touch the SVG.

My HTML structure is essentially this (focusing on the main layout elements and styles):

  <div class="responsive-grid">

  <!-- ...lots of nested divs, I have no control over these -->

    <div id="panel-5" class="col-12"> <!-- width: 100% float: left -->
    <!-- this is the element where IE begins its offsetWidth frenzy -->
      <div class="column-container"> <!-- position: absolute to fix column height -->
        <div class="sub-column"> <!-- width: 66%; display: inline-block -->
          <div class="square"> <!-- width: 100%; padding-bottom: 100%; position: relative -->
            <svg viewbox="0 0 500 500" preserveAspectRatio="XMinYMin meet" ...>
            <!-- svg position: absolute; width:100%; height: 100% -->

              <!-- lots and lots of SVG paths -->

.square is the element I calculate the width of.

The SVG inside it is absolutely positioned, and even if it wasn't, the paths within the SVG have no baring on the width or height of the SVG element let alone its HTML parent, so I don't understand why IE insists on scanning their widths (then, getting stuck and re-rendering) when it calculates the width of the parent.

Is there anything I can do to stop IE doing this? How exactly does IE determine which elements to check in such calculations and updates?

来源：https://stackoverflow.com/questions/39481759/how-to-stop-ie-needlessly-calculating-svg-element-widths-when-calculating-an-anc