Как отследить в браузере завершение отрисовки отдельного элемента после ajax запроса

Есть ajax запрос

    $.ajax({
        url: '/site',
        method: httpMethod,
        dataType: 'html',
        data: object,
        success: function(data){
            $('.modal').html(data);
            $('.modal').show();
            let offset = $('.modal-element').offset();
        }
    })

После успешного запроса, сервер выдает кусок html кода, который вставляется в уже существующий на странице блок с классом .modal, этот блок изначально имеет display: none.

Затем при наступлении какого-то события блок с классом .modal становится видимым (display: block) и задача состоит в том, чтобы узнать расположение некоторых элементов в этом блоке, для понимания того, находятся они сейчас в видимой пользователю области или нет. Но если написать так, как показано выше, то свойства объекта offset будут равны нулю. Я это понимаю так, что браузер не успевает отрисовать эти элементы, чтобы определить их размер и их позицию на экране. Если перед строчкой

let offset = $('.modal-element').offset();

вставить setTimeout, то все работает хорошо, положение элементов определяется верно. Но со значениями setTimeout не угадаешь, у всех отрисовка будет занимать разное время. Можно ли как-то отследить момент отрисовки отдельного блока .modal? Чтобы вычислять offset только когда все элементы уже точно заняли свои места на экране.