Safari 浏览器存在 radial-gradient() 作为 background-image 时无法随视口尺寸动态重绘的问题，导致椭圆渐变固定在初始尺寸；本文提供兼容性更强的 background 简写语法方案，并附可验证的代码示例与关键原理说明。
safari 浏览器存在 `radial-gradient()` 作为 `background-image` 时无法随视口尺寸动态重绘的问题，导致椭圆渐变固定在初始尺寸；本文提供兼容性更强的 `background` 简写语法方案，并附可验证的代码示例与关键原理说明。
在 Safari（尤其是 v18.2 及近期版本）中，当使用 background-image: radial-gradient(...) 配合相对单位（如 vw、vh、%）定义椭圆尺寸时，浏览器会将渐变“快照化”——即仅在元素首次渲染或样式强制重计算（如开发者工具修改）时采样一次尺寸，后续窗口缩放不再触发重绘。这并非 CSS 规范兼容性缺失（Safari 确实完整支持现代 radial-gradient()），而是其渲染引擎对 background-image 单独声明中响应式渐变的更新机制存在优化缺陷。
根本解决思路：避免单独使用 background-image，改用 background 复合属性声明
将位置、尺寸、重复方式与渐变定义统一写入 background 属性，可绕过 Safari 的该渲染缓存逻辑。关键在于将椭圆尺寸（20vw 24vw）和定位偏移（50% 35%）显式分离到 background-size 和 background-position，而非嵌套在 radial-gradient() 函数内部：
#child {
height: 100%;
width: 100%;
/* ✅ 推荐：使用 background 复合属性 */
background:
radial-gradient(circle at 50% 50%, red 80%, transparent 0)
50% 35% / 20vw 24vw no-repeat;
}
? 语法解析：
radial-gradient(circle at 50% 50%, ...)：定义以中心为原点的圆形渐变（更稳定）；若需椭圆，保留ellipse亦可，但推荐先用circle排查；50% 35%：background-position，控制渐变起始点在元素内的坐标；/ 20vw 24vw：background-size，独立指定宽高，支持vw/vh响应式单位；no-repeat：防止平铺干扰视觉效果。
补充增强兼容性的实践建议：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 添加
background-origin: border-box和background-clip: border-box明确渲染基准； - 对于复杂布局，可在
#child上添加transform: translateZ(0)或will-change: background，轻微触发硬件加速，促使 Safari 更积极重绘； - 若仍需精确椭圆且
vw尺寸不可替代，可配合 JavaScript 监听resize事件并动态设置内联样式（不推荐，仅作兜底）。
经实测，上述 background 写法在 Safari 18.2+、Chrome 120+、Firefox 120+ 中均能实现平滑响应式缩放，无需前缀或降级方案。核心原则是：将响应式尺寸从渐变函数内部解耦至 background-size，让浏览器明确识别其需持续监听的动态属性。
