css变量本身不触发transition，因浏览器仅对计算后的具体值过渡；safari闪烁主因是变量支持弱、图层重建及初始化时机晚；需确保变量定义为具体颜色、body加translatez(0)稳图层、变量声明置于head最前。
为什么 transition 对 CSS 变量不起作用？
直接给 color 或 background-color 写 transition，但颜色值来自 var(--bg)，浏览器不会自动追踪变量变化——它只对「最终计算出的样式值」做过渡。如果变量变了但元素的 computed style 没变（比如变量更新后 DOM 未重绘），或者变量切换前后没有明确的中间状态（如从 var(--light-bg) → var(--dark-bg)，但两个变量都未被解析为具体颜色），transition 就完全不触发，导致“啪”一下跳变。
为什么 Safari / iOS WebView 切换时必闪？
WebKit 渲染引擎对 CSS 变量 + transition 的组合支持较弱，尤其在首次加载或变量批量更新时：它可能先按旧变量值渲染一帧，再用新变量值重绘，中间无过渡帧。更关键的是，若没提前为相关元素创建稳定合成层，Safari 会在变量更新瞬间销毁/重建图层，引发白边、文字抖动或整块闪烁。
-
transform: translateZ(0)必须加在使用变量的元素自身上（不是 body 或 wrapper） - 不能只靠
transition: background-color 0.4s—— 要确保--bg在亮/暗两套里都定义为具体颜色（如#ffffff↔#121212），而非transparent或未定义值 - 避免在 JS 切换类名后立刻读取
getComputedStyle，这会强制同步重排，打断过渡流程
为什么 localStorage 同步 + 类名切换还会闪？
典型问题出在「初始化时机」：JS 先执行 document.documentElement.classList.add('dark')，但此时 CSS 变量尚未注入，浏览器按默认值渲染；等样式表加载完成、变量生效，颜色才突变。这不是过渡失败，而是初始渲染错位。
- 把 CSS 变量定义放在
最顶部的<style></style>块中，早于所有其他样式 - 不要等
DOMContentLoaded才设置主题类，改用document.write或内联脚本在开头就写入 class（需配合服务端或构建时注入） - 若必须 JS 控制，用
document.documentElement.setAttribute('data-theme', 'dark')替代 class 切换，并在 CSS 中用[data-theme="dark"]选择器，可减少 class 变更带来的重排扰动
真正起效的最小可行方案
别堆砌技巧，聚焦三件事：变量定义要实、图层要稳、初始化要早。下面这段代码在 Safari/iOS 上实测不闪：
/* CSS */
:root {
--bg: #fff;
--text: #000;
transition: background-color 0.4s, color 0.4s;
}
[data-theme="dark"] {
--bg: #121212;
--text: #eee;
}
body {
background-color: var(--bg);
color: var(--text);
/* 关键：主动创建合成层 */
transform: translateZ(0);
}
注意：transform: translateZ(0) 加在 body 上不是为了移动，只是为了告诉 WebKit：“这个元素要稳定成层”，否则变量更新时图层反复重建，再好的 transition 也救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
