Почему реализация CSS Grid SASS моего Angular-приложения, совместимая с IE, вызывает отставание IE при открытой консоли dev на IE?

Question

Поскольку Internet Explorer поддерживает старую реализацию CSS-сетки, я решил написать sass-реализацию, которая полностью работает в браузере для гридов.В настоящее время нет поддержки различий в ширине столбцов.

Это приводит к зависанию Internet Explorer на 15 секунд, когда я пытаюсь проверить DOM.Всякий раз, когда я открываю элемент узла компонента в DOM Explorer в IE, он зависает и показывает пустое место в DOM Explorer, пока в конце концов не добавит элементы.Я также не могу закрыть консоль разработки, так как это приводит к тому, что сайт «не отвечает» и останавливается.

глобальная таблица стилей:

 // grid
// reusable grid classes
$max-rows: 10;
$max-columns: 10;
@for $rowNum from 1 through $max-rows {
    @for $colNum from 1 through $max-columns {
        .grid-col#{$colNum}-row#{$rowNum} {
            width: 100%;
            @include display-grid($colNum);
            @include ms-support-children($colNum, $rowNum);
        }
    }
}

// the same logic but with gaps
$possibleGapSizes: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50;
@for $rowNum from 1 through $max-rows {
    @for $colNum from 1 through $max-columns {
        @each $gapSize in $possibleGapSizes {
            .grid-col#{$colNum}-row#{$rowNum}-gap#{$gapSize} {
                width: 100%;
                @include display-grid($colNum);
                @include ms-support-children($colNum, $rowNum, $gapSize);
            }
        }
    }
}

mixins:

// Grid related
// NB: IE expects information on grid widths defined on children so we use that kind of
//     syntax for all browsers for consistency

// NB: column values cannot be auto - use fr
@mixin display-grid($columnCount) {
    display: grid;
    display: -ms-grid;
    grid-template-columns: calculateFr($columnCount);
    -ms-grid-columns: calculateFr($columnCount);
}

@mixin display-inline-grid($columnCount) {
    display: inline-grid;
    display: -ms-inline-grid;
    grid-template-columns: calculateFr($columnCount);
    -ms-grid-columns: calculateFr($columnCount);
}

@mixin ms-support-children($columnCount, $rowCount, $gapPixelsNum: "") {
    $nthCounter: 1;
    @for $k from 1 through $rowCount {
        @for $i from 1 through $columnCount {
            > *:nth-child(#{$nthCounter}) {
                grid-column: $i;
                -ms-grid-column: $i;
                grid-row: $k;
                -ms-grid-row: $k;

                // this whole block is about gaps
                @if $columnCount > 1 {
                    @if $gapPixelsNum != "" {
                        @if $i % 2 == 0 {
                            margin-left: $gapPixelsNum + px;
                        }
                        @else {
                            margin-right: $gapPixelsNum + px;
                        }
                    }
                }
            }

            $nthCounter: $nthCounter + 1;
        }
    }
}

@function calculateFr($columnCount){
    $frs: '';

    @for $i from 1 through $columnCount {
        $frs: $frs + '1fr ';
    }

    @return unquote($frs);
}

Я должен сказать, что, пока консоль разработчика не открыта, все в порядке.