ios safari 15.6 之前版本不支持 @keyframes 和伪元素中使用 css 变量，会静默丢弃整条规则；calc() 中嵌套 var() 也不稳定，需用 js 内联数值或改用 clamp() 等兼容方案。
移动端 Safari 中 CSS 变量（--var）不是“延迟渲染”，而是部分版本压根不解析——尤其在动画、伪元素或 @keyframes 里用变量时，整个声明块会被静默跳过，页面看起来像“卡住”或样式丢失。
为什么 @keyframes 里用 var(--x) 动画直接不跑
iOS Safari 15.6 之前版本完全不支持 var() 在 @keyframes 内部的解析。浏览器遇到 transform: translateX(var(--offset)) 这类写法，会直接丢弃整条 @keyframes 规则，而不是报错或 fallback。结果就是加了动画类，元素纹丝不动。
- 必须把变量值提前内联为具体数值：比如
transform: translateX(42px)，不能靠 JS 注入后让 CSS 动态读取 - 如果要用 JS 控制动画参数，改用
element.animate()API，它在 Safari 12.1+ 稳定支持 - 双写
@keyframes无用——@-webkit-keyframes同样不认var()
::before/::after 伪元素中变量失效的常见场景
伪元素本身不继承父元素的 CSS 变量作用域，除非显式继承或重定义。更麻烦的是：Safari 对伪元素中 var() 的计算时机比 Chrome 晚一帧，导致首次渲染时取不到值，表现为背景色/尺寸短暂为空或回退到初始值。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 不要依赖
.box::before { content: ""; background: var(--bg); }直接生效；先给.box设一个兜底背景：background: #f0f0f0; - 若变量由 JS 设置，确保设置后触发一次强制重排：
getComputedStyle(el).opacity;（哪怕只是读个无关属性） - 避免在伪元素里用
var()驱动transition或animation，Safari 会拒绝启动
变量在 calc() 里表现不稳定的根本原因
calc(var(--gap) * 2) 在 iOS 15.x 及更早 Safari 中常被当作无效表达式，降级为 calc(0 * 2) 或直接忽略整条声明。这不是语法错误，是解析器未完成对嵌套函数的支持。
- 降级方案：用 JS 计算好值再写进
style属性，或用data-属性配合属性选择器模拟 - 真需要响应式计算，改用
clamp()+ 媒体查询组合，它在 Safari 14.5+ 支持良好 - 别在
min-height: calc(var(--vh, 1vh) * 100)这种关键布局中依赖变量——老 Safari 会把它当无效值，退化成auto，页面塌陷
真正容易被忽略的是：变量值本身没问题，但 Safari 对“变量何时可被读取”的判断极保守——它不等 JS 设置完就走 CSS 解析流程，也不重试。所以靠 JS 动态注入变量再指望 CSS 立即响应，在 Safari 里大概率失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
