移除Tailwind CSS blur-sm类在Safari中几乎无效的问题排查

这是Safari的WebKit渲染引擎存在的小bug——移除CSS滤镜类后没有自动触发重绘，导致视觉上的模糊效果没有同步更新。以下是几个可行的修复方案：

方案1：强制触发元素重绘 #

在移除blur-sm类后，通过微小的样式变动强制浏览器重绘元素：

unblurFrenchPhrases() {
    document.querySelectorAll('.french-phrase').forEach(e => {
        e.classList.remove('blur-sm');
        // 强制触发重绘的小技巧
        e.style.display = 'none';
        e.offsetWidth; // 读取offsetWidth会触发浏览器重排
        e.style.display = '';
    });
}

方案2：直接操作内联样式替代类切换 #

放弃依赖Tailwind类，直接通过JS修改filter内联样式，这种方式Safari能实时响应：

// 取消模糊
unblurFrenchPhrases() {
    document.querySelectorAll('.french-phrase').forEach(e => {
        e.style.filter = 'none';
    });
}

// 模糊文本（对应Tailwind的blur-sm效果）
blurFrenchPhrases() {
    document.querySelectorAll('.french-phrase').forEach(e => {
        e.style.filter = 'blur(4px)';
    });
}

方案3：批量触发父元素重绘 #

如果需要处理的元素较多，可以给它们的父容器触发重绘，避免逐个处理元素：

unblurFrenchPhrases() {
    document.querySelectorAll('.french-phrase').forEach(e => {
        e.classList.remove('blur-sm');
    });
    // 替换成你实际的父容器选择器
    const parentContainer = document.querySelector('.bilingual-paragraphs');
    parentContainer.style.display = 'none';
    parentContainer.offsetWidth;
    parentContainer.style.display = '';
}

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