Safari 浏览器存在一个已知渲染缺陷：当使用 background-image: radial-gradient() 并包含相对单位（如 vw）定义椭圆尺寸时，渐变不会响应视口尺寸变化而重绘，导致背景“冻结”在初始尺寸。本文提供兼容性更强的 CSS 写法与原理分析，确保径向渐变在 Safari、Chrome 和 Firefox 中均能真正响应式缩放。
safari 浏览器存在一个已知渲染缺陷：当使用 `background-image: radial-gradient()` 并包含相对单位（如 `vw`）定义椭圆尺寸时，渐变不会响应视口尺寸变化而重绘，导致背景“冻结”在初始尺寸。本文提供兼容性更强的 css 写法与原理分析，确保径向渐变在 safari、chrome 和 firefox 中均能真正响应式缩放。
Safari（尤其是 18.2 及更早版本）对 radial-gradient() 在 background-image 属性中直接使用含 vw/vh 的尺寸语法（如 ellipse 10vw 12vw）存在渲染缓存问题——浏览器首次计算后便不再监听视口变化，从而导致渐变失活。这不是兼容性缺失（Safari 确实支持标准 radial-gradient），而是其渲染引擎（WebKit）在组合式背景解析上的优化副作用。
✅ 推荐解决方案：分离声明 + background 复合属性
将渐变的形状、颜色、位置、尺寸、重复行为拆解为 background 复合属性的多个参数，而非仅用 background-image。关键在于：将尺寸（20vw 24vw）和定位（50% 35%）移至 background-size 和 background-position，并将渐变本身简化为基于 50% 50% 圆心的标准化写法：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
#child {
height: 100%;
width: 100%;
background:
radial-gradient(circle at 50% 50%, red 80%, transparent 0)
50% 35% / 20vw 24vw no-repeat;
}✅ 此写法明确分离了：
- 渐变定义（
radial-gradient(...)）→ 固定圆心，语义清晰；- 背景定位（
50% 35%）→ 相对于元素自身的偏移；- 背景尺寸（
20vw 24vw）→ 显式控制椭圆宽高，且 Safari 对background-size中的vw单位具有完整、实时的响应式监听能力；no-repeat→ 避免意外平铺干扰。
⚠️ 注意事项：
- 不要混用
background-image单独设置渐变 +background-size：Safari 可能忽略尺寸联动； - 避免在
radial-gradient()函数内直接写ellipse 10vw 12vw at ...—— 这正是触发 Safari 渲染冻结的典型模式； - 若需精确椭圆（非 circle），可保留
ellipse，但务必配合background-size控制形变，例如：background: radial-gradient(ellipse at 50% 50%, red 80%, transparent 0) 50% 35% / 20vw 24vw no-repeat;
- 建议添加
will-change: background-size（谨慎使用）或轻量级 resize 监听器作为兜底（仅极端场景需要）。
? 补充验证技巧：
在 Safari 开发者工具中，临时修改任意 background 相关属性（如加个空格或改 no-repeat 为 repeat），即可强制重绘——这印证了问题本质是渲染缓存未失效，而非语法错误。
总结而言，该问题的本质是 Safari 对复合 CSS 函数中动态单位的惰性求值策略。通过转向语义更清晰、职责更单一的 background 复合声明，我们绕过了其解析瓶颈，实现了跨浏览器一致、真正响应式的径向渐变背景。
