spinner-border not working on Safari, on Bootstrap v5.3.0-alpha3

[peterelsayeh]

Hi,

Im opening a spinner in a modal, which works well on Chrome and Firefox, but not on Safari. However, adding it to show at DomContentLoading makes it appear, but not when its added to anywhere else in the codebase. See below, that allows the spinnerModal to indeed work for a second. Has anyone experienced any type of behaviour like this?

document.addEventListener('DOMContentLoaded', function () {
    showSpinnerModal(); // Enable spinner for testing
    setTimeout(disableSpinnerModal, 1000); // Disable spinner after 3 seconds for testing
});

var spinnerModal = new bootstrap.Modal(document.getElementById('spinnerModal'));
function showSpinnerModal() {
    console.log('Showing spinner');
    spinnerModal.show();
}

function disableSpinnerModal() {
    spinnerModal.hide();
}

[julien-deramond]

Hi @peterelsayeh
Maybe some elements could help to narrow down the issue:

• In the title, Bootstrap v5.3.0-alpha3 is mentioned. Have you tried with Bootstrap 5.3.3 (latest version)?
• Which Safari / iOS versions are you using?
• Could you maybe share a reproducible example without the workaround with CodePen or StackBlitz?

[peterelsayeh]

Thanks @julien-deramond for the quick response. I realised that I have the spinner working properly on my other web-apps across all browsers, so this is most certainly due to some issues in my code only. Will close this ticket down not. Ill close this ticket down.