Chrome与Safari中CSS过渡排队而非同步执行的问题排查

问题原因 #

不同浏览器的渲染引擎对全局过渡的处理逻辑存在差异：

• Firefox的Gecko引擎会把body的样式变更当作统一触发点，一次性计算所有继承该样式元素的过渡动画，实现同步切换效果。
• Chrome和Safari基于Blink/WebKit引擎，会按照元素的样式优先级、渲染层级分批处理继承的样式变更，导致容器、文本、斜体文本等不同类型元素的过渡依次执行，出现错落的动画效果。

从CSS规范角度看，《CSS Transitions Level 2》仅定义了过渡的触发条件和属性动画逻辑，并未明确规定样式继承时的批量处理规则，这给不同引擎留下了实现空间，最终导致表现差异。

实现全局同步过渡的方案 #

方案1：用CSS变量统一管控样式 #

把颜色值定义为CSS变量，直接在body上切换变量值，同时将过渡属性绑定到body而非全局*选择器：

/* 定义基础变量 */
:root {
  --text-color: #000;
  --bg-color: #fff;
}

/* 深色模式下的变量值 */
body.dark-mode {
  --text-color: #fff;
  --bg-color: #000;
}

/* 绑定变量到body，设置过渡 */
body {
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: color 1s, background-color 1s;
}

/* 其他元素继承body样式，无需单独加过渡 */
.container, p, em {
  color: inherit;
}

所有元素的颜色都继承自body的变量，引擎会将变量变更视为单一触发事件，同步执行所有依赖元素的过渡动画。

方案2：用will-change提前通知浏览器 #

在受影响的元素上添加will-change属性，让浏览器提前准备样式变更，减少分批处理的情况：

* {
  transition: color 1s, background-color 1s;
  will-change: color, background-color;
}

不过这个方案的效果可能因浏览器版本而异，且过度使用会占用额外性能资源，建议配合方案1一起使用。

方案3：伪元素覆盖模拟全局过渡 #

在body上添加全屏伪元素，通过切换伪元素的透明度模拟全局过渡，避免元素逐个动画：

body {
  position: relative;
  color: #000;
  background-color: #fff;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
  z-index: 9999;
}

body.dark-mode {
  color: #fff;
}

body.dark-mode::before {
  opacity: 1;
}

这种方式通过遮罩层的过渡模拟全局切换的视觉效果，虽不是元素本身的颜色过渡，但能实现同步的视觉体验。

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