Vue+Sass项目Safari下部分CSS规则不生效，手动开关检查器后正常

根本原因 #

这是Safari 14.x版本的已知内核重绘Bug：动态修改DOM类名时，部分样式属性的更新没有触发浏览器渲染层的重绘操作，虽然样式规则已经被浏览器识别（检查器可看到更新后的属性），但视图没有同步更新，手动切换属性会强制触发重绘所以恢复正常。

修复方案 #

通用强制重绘方案 #

给出现问题的元素添加触发重绘的CSS规则，无业务侵入性：

/* 给按钮、content类添加该规则即可 */
.submit, .content {
  transform: translateZ(0);
}

该规则会开启元素的GPU加速，强制浏览器单独处理该元素的渲染层，避免和其他节点的重绘逻辑冲突。

如果不希望开启GPU加速，也可以在类名变更后主动触发重绘：
按钮场景：在agreed变量变更逻辑后添加如下代码

this.$nextTick(() => {
  const btn = document.querySelector('.submit')
  btn.style.display = 'none'
  btn.offsetHeight // 主动触发重绘计算
  btn.style.display = ''
})

Grid布局场景：监听窗口resize事件主动触发重绘

window.addEventListener('resize', () => {
  const content = document.querySelector('.content')
  content.style.display = 'none'
  content.offsetHeight
  content.style.display = 'grid'
})

样式优先级调整方案 #

Safari对嵌套Sass选择器的优先级计算偶发异常，可把disabled类的样式提到外层提升优先级：

button {
  /* 原有基础样式不变 */
}
button.disabled {
  pointer-events: none;
  cursor: not-allowed;
  background-color: $light-grey;
  border-color: $med-light-grey;
  color: $off-black;
}

依赖替换方案 #

你当前使用的node-sass已经停止维护，旧版本编译出的CSS选择器顺序可能触发Safari的解析Bug，可直接替换为sass（dart-sass），完全兼容现有语法无需修改业务代码：

npm uninstall node-sass
npm install sass@1.32.0 --save-dev

该版本和你当前使用的sass-loader@10.2.0完全兼容，不会产生破坏性变更。

验证方式 #

修改后在Safari 14.1无痕模式下多次测试动态类名切换、窗口缩放场景，确认样式正常更新即可。

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