Почему не открывается dialog в браузере mozila и safari?

Во всех браузерах, кроме Mozila и Safari на сайте открывается диалоговое окно. В чём может быть проблемка? Прикладываю кусочки кода. HTML (dialog лежит в конце body):

<dialog id="dialog-reebok" class="reebok-dialog">
        <p class="dialog-header">Ваш промокод:</p>
        <p class="promokode" id="promokodeID-reebok">Reebok123</p>
        <p class="promokode-description">Нажмите на него, чтобы скопировать</p>
        <div class="btn-group-dialog">
            <a href="https://www.reebok.ru" rel="nofollow" target="_blank" class="btn_project" id="openSiteReebok">На сайт Reebok</a>
            <a class="btn_project" id="cancelDialogReebok">Закрыть</a>
        </div>
</dialog>

<footer>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="assets/js/app.js"></script>
</footer>

CSS:

dialog {
    position: fixed;
    width: 600px;
    height: 380px;
    text-align: center;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
}

.dialog-header {
    font-size: 36px;
    line-height: 42px;
    color: #000000;
}

.btn-group-dialog {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promokode {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 42px;
    background: #FF4747;
    padding: 25px;
    color: #FFFFFF;
}

.promokode-description {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
}

.btn_project {
    width: 150px;
    height: 45px;
    margin-left: 10px;
    margin-right: 10px;
    border: 2px solid #FF4747;
    box-sizing: border-box;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    color: #FF4747;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn_project:hover {
    background-color: #FF4747;
    color: #FFFFFF;
    transition: color .1s ease-in-out;
}

JS (app.js):

document.querySelector('#promokodeID-reebok').addEventListener(
  'click',
  async (event) => {
    const code = event.target.innerText;
    await navigator.clipboard.writeText(code);
    alert(`Промокод ${code} скопирован!`);
  }
);

var $ButOpenSiteReebok = $('#Reebok'),
    $DialogPromoReebok = $('#dialog-reebok');

$ButOpenSiteReebok.on('click', function() {
    $DialogPromoReebok[0].showModal();
});

$('#cancelDialogReebok').on('click', function() {
    $DialogPromoReebok[0].close();
});

var transition;
 
$ButOpenSiteReebok.on('click', function() {
    $DialogPromoReebok[0].showModal();
    transition = setTimeout(function() {
        $DialogPromoReebok.addClass('dialog-scale');
    }, 0.5);
});

$('#cancelDialogReebok').on('click', function() {
    $DialogPromoReebok[0].close();
    $DialogPromoReebok.removeClass('dialog-scale');
    clearTimeout(transition);
});