После обновления содержимого div с помощью ajax, карта расширяется вверх, а не вниз

Question

Я использую сетку Bootstrap 4. Существует основной контейнер, в который данные перезагружаются / обновляются с помощью Ajax. После того, как содержимое контейнера загружено через нумерацию страниц, в нижней части экрана, и я расширяю последнюю карту, расширение идет вверх. После прокрутки вверх, а затем обратно вниз, он идет вниз. Эта проблема возникает только в Chrome. Я тестировал на IE / Edge / Firefox, и он работает как положено.

Это то, что происходит. Обратите внимание на полосу прокрутки справа.

Переход на 2-ю страницу Нажатие развернуть стрелку

Ожидаемый результат: Карта расширяется вниз, а полоса прокрутки остается на месте. Расстояние от вершины до самого себя остается неизменным.

Фактический результат: Такое ощущение, что карта разваливается вверх. Полоса прокрутки остается внизу, а расстояние сверху до самого себя увеличивается, как будто полоса прокрутки застряла внизу.

Это макет:

<div class="main" id="main">
    <div class="container">...</div> <!--some container-->
    <div class="container"> <!--one of the many cards-->
        <div class="row">
            <div class="col-12">
                <div class="card d-flex flex-column">
                    <div class="expand visible">
                        <a href="#" class="text-primary float-right" data-toggle="collapse" data-target="#collapse_149" aria-expanded="false" aria-controls="collapse_149"><i class="fas fa-angle-double-down"></i></a>
                    </div>
                    <div class="card-body bg-white">
                        <div class="row justify-content-center align-items-center">
                            <div class="col-12 col-sm-3">...</div>
                            <div class="col-12 col-sm-3 pt-1">...</div>
                            <div class="col-12 col-sm-3 pt-1">...</div>
                            <div class="col-12 col-sm-3 pt-1">...</div>
                            <div class="col-12">
                                <div class="row pt-2">
                                    <div class="col">
                                        <div class="collapse" id="collapse_149">
                                            <div class="row">
                                                <div class="col-12 pt-2">...</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">...</div> <!-- navigation container --> 
</div>

JS:

$.post(
    'path',
    {
        params
    },
    function (result) {
        $('#main').html(result);
    }
);

В результате получается все, что вы видите в классе main.

Я мог бы решить эту проблему с помощью: $(window).scrollTop($(window).scrollTop() - 1). Но это позволяет избежать, а не решить проблему.

Я даже не уверен, что является причиной проблемы. Это Chrome, Bootstrap 4 Collapse или асинхронный вызов ajax? Я предполагаю, что после обновления содержимого в main, каким-то образом в Chrome позиция на экране «фиксируется» в нижней части страницы.

Я бы хотел понять причину проблемы и решить ее соответствующим образом.

Возможно, стоит упомянуть. Общая высота карточек на странице 1 больше, чем на странице 2. Это связано с тем, что некоторые карточки имеют дополнительную информацию. Возможно, Chrome вычисляет начальную высоту окна и затем не пересчитывает высоту на странице 2, а только после небольшой прокрутки.