Как остановить IE без необходимости вычислять ширину SVG-элемента при вычислении offsetWidth предка?

У меня есть функция, которая должна проверять текущую фактическую ширину пикселя элемента% width в виджете. В обычных браузерах работает нормально, в IE (во всех версиях, включая IE11) нормально; но когда виджет помещается на адаптивную страницу с довольно нормальным уровнем сложности со многими родительскими элементами, некоторые также с% width, IE блокируется и занимает полсекунды или более просто, чтобы вычислить ширину одного простого элемента, а затем начинает рендеринг как сумасшедший с использованием процессора, превышающим 100% в течение длительного времени (другие браузеры занимают всего несколько миллисекунд).

Я видел много комментариев о том, что вычисления ширины и высоты в IE печально известны своей медлительностью, обычно при работе со многими значениями ширины на основе%; например:

родной браузер offsetWidth... известно, что в некоторых сценариях IE мучительно медленен (например, при взаимодействии с большой таблицей)

На панели "Отзывчивость пользовательского интерфейса инструментов разработчика" мне удалось отследить ее до случайных, казалось бы, отдельных элементов в SVG. Когда я полностью раскрываю этот зеленый прямоугольник, 95%+ это всего лишь один ничем не примечательный элемент в SVG-карте, содержащей более 200 элементов:

введите описание изображения здесь

IE не должен смотреть на содержимое SVG вообще - путь SVG, содержащийся в svg элемент, конечно, не может влиять на ширину или высоту предка. Хуже того, после этого он делает много ненужного повторного рендеринга, включая (я полагаю) каждый элемент SVG, даже если все, что я делаю, не должно даже касаться SVG.

Моя HTML структура по сути такая (фокусируется на основных элементах и ​​стилях макета):

  <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 это элемент, который я рассчитываю ширину.

SVG внутри него абсолютно позиционирован, и даже если это не так, пути внутри SVG не имеют ограничений по ширине или высоте элемента SVG, не говоря уже о его родительском элементе HTML, поэтому я не понимаю, почему IE настаивает на сканировании их ширины (затем застревание и повторный рендеринг), когда он вычисляет ширину родителя.

Могу ли я что-нибудь сделать, чтобы IE прекратил это делать? Как именно IE определяет, какие элементы проверять при таких вычислениях и обновлениях?

0 ответов

Другие вопросы по тегам