Safari на MacOS и iOS останавливается с помощью жеста «Назад» на странице, загруженной ajax

Question

Я написал javascript для динамической загрузки галереи изображений с помощью ajax. Я также реализовал поддержку кнопки «Назад», которая работает во всех браузерах. Проблема в том, что когда вы используете жест смахивания, чтобы вернуться в сафари (но только жест, кнопка «назад» работает нормально). Страница зависает примерно на 4-5 секунд (вы даже не можете прокрутить или щелкнуть что-либо), а затем работает как положено.

Что я делаю:

1. Когда вы впервые загружаете страницу, она вызывает Ajax, чтобы получить доступные фотоальбомы. Затем создайте элементы DOM и покажите их с анимацией затухания После этого данные (только необходимые данные для воссоздания элементов, а не весь HTML) сохраняются с pushState.
2. Если вы щелкнете по одному альбому, то вызовет другой ajax-вызов, чтобы получить фотографии, удалит все ранее вставленные элементы и добавит новые с исчезающей анимацией. Это также спасает государство.

Нажатие кнопки «Назад» обрабатывается следующим образом:

window.addEventListener('popstate', function (e) {
    let prior = e.state;

    if (prior.type == 'albumCollection') {
        //Remove album information
        $(".album-info-wrap").hide().children().remove();
        //Show filter options and show the page header with title
        $(".album-filter-wrap").show();
        $("header.entry-header .entry-title").show();

        initAlbumList(prior.itemList);
        showAlbumList();
    }
});

function initAlbumList(data) {
    itemList = data;
    albumInItemList = true;
}

function showAlbumList() {
    if (!albumInItemList) {
        return
    }
    $("html,body").animate({scrollTop: 0}, "fast");
    clearGrid();

    del = 0;
    $.each(itemList, function (index, element) {
        var $item = $("<div>", {
            class: "grid-item grid-item-album",
            id: element.id
        }).hide().append(
            $("<div>", {class: "grid-item-overlay"}).append(
                $("<div>", {class: "grid-img-head d-flex justify-content-between"}).append(
                    $("<span>", {class: "grid-img-head-text"}).text(element.title)
                ),
                $("<img>", {class: "img-fluid", src: element.cover, srcset: `${element.cover2x} 2x`}))
        );
        $grid.append($item);
        $item.delay(del).fadeIn(300);
        del += 80;
    });
    window.history.pushState({itemList: itemList, type: 'albumCollection'}, '', 'loc='
        + selectedLocation + '&year=' + selectedYear);
}