Firefox与iOS Safari中dialog元素::backdrop伪类动画失效求助

问题背景 #

我在网站中使用HTML dialog元素创建模态对话框，在Google Chrome 113.x及Microsoft Edge 113.x浏览器中，dialog元素及::backdrop伪类的过渡动画均可正常运行，但在Firefox和iOS Safari中，::backdrop伪类的过渡动画无法生效，而是直接显示出来。我希望在Firefox和iOS Safari中实现::backdrop的淡入效果，原代码设置了2秒的过渡时长。

原代码 #

HTML #

<h1>Modal Test</h1>

<p>Click Open to open. Click anywhere else to close.</p>

<button open-modal>Open</button>

<dialog class="modal">
    <h2>Modal Dialog</h2>
</dialog>

CSS #

:root,
dialog.modal::backdrop
{
    --animation-duration : 2s;
}

dialog.modal
{
    animation-duration : var(--animation-duration);
    animation-name     : none;
}

@keyframes fadeIn
{
    from { transform : scale(0); }
    to   { transform : scale(1); }
}

@keyframes fadeOut
{
    from { transform : scale(1); }
    to   { transform : scale(0); }
}

dialog.modal::backdrop
{
    background         : blue;
    opacity            : 0.5;
    animation-name     : backdropFadeIn;
    animation-duration : var(--animation-duration);
}

dialog.modal.fadeOut::backdrop
{
    animation-name : backdropFadeOut;
}

@keyframes backdropFadeIn
{
    from { opacity : 0; }
}
@keyframes backdropFadeOut
{
    to   { opacity : 0; }
}

JavaScript #

const openButton = document.querySelector("[open-modal]");
const dialog = document.querySelector("dialog");

openButton.addEventListener("click", () =>
{
    dialog.style.animationName = "fadeIn";
    dialog.showModal();
});

dialog.addEventListener("click", e =>
{
    dialog.classList.add("fadeOut");
    dialog.style.animationName = "fadeOut";
});

dialog.addEventListener("animationend", () =>
{
    if(dialog.style.animationName === "fadeOut")
    {
        dialog.close();
        dialog.classList.remove("fadeOut");
    }
});

解决方案 #

Firefox和iOS Safari对::backdrop的animation支持存在兼容性问题，改用transition控制透明度变化可以解决该问题，同时调整JS逻辑确保过渡触发时机正确：

修改后的CSS #

:root {
    --transition-duration: 2s;
}

dialog.modal {
    transition: transform var(--transition-duration) ease;
    transform: scale(0);
}

dialog.modal.open {
    transform: scale(1);
}

dialog.modal::backdrop {
    background: blue;
    opacity: 0;
    transition: opacity var(--transition-duration) ease;
}

dialog.modal.open::backdrop {
    opacity: 0.5;
}

dialog.modal.fade-out {
    transform: scale(0);
}

dialog.modal.fade-out::backdrop {
    opacity: 0;
}

修改后的JavaScript #

const openButton = document.querySelector("[open-modal]");
const dialog = document.querySelector("dialog");

openButton.addEventListener("click", () => {
    // 强制浏览器重绘，确保初始状态生效
    void dialog.offsetWidth;
    dialog.classList.add("open");
    dialog.showModal();
});

dialog.addEventListener("click", () => {
    dialog.classList.remove("open");
    dialog.classList.add("fade-out");
});

dialog.addEventListener("transitionend", (e) => {
    // 仅监听dialog自身的过渡结束事件
    if (e.target === dialog && dialog.classList.contains("fade-out")) {
        dialog.close();
        dialog.classList.remove("fade-out");
    }
});

关键说明 #

1. 用transition替代animation控制::backdrop的透明度，Firefox和Safari对::backdrop的transition支持更稳定。
2. 通过添加/移除open类触发dialog和backdrop的显示过渡，添加fade-out类触发关闭过渡。
3. void dialog.offsetWidth用于强制浏览器重绘，确保初始的transform: scale(0)和opacity: 0状态被正确应用，避免过渡不触发。
4. 关闭时监听transitionend事件，确保过渡完成后再关闭dialog。

内容的提问来源于stack exchange，提问作者Mike McCollister