Safari中响应式background-image径向渐变无法随窗口缩放问题

我用background-image里的radial-gradient()创建响应式椭圆，Chrome和Firefox里窗口缩放时渐变能正常调整大小，但Mac版Safari 18.2里不行——只有修改代码触发重绘时才会更新尺寸，之后就固定不变了。

MDN显示Safari完全支持radial-gradient()和background-image相关特性，和Chrome一致，所以不是兼容性问题。

复现代码 #

CSS #

#inner-parent {
  height: 50%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

#child {
  height: 100%;
  width: 100%;
  background-image: radial-gradient(ellipse 10vw 12vw at 50% 35%,
      red 80%,
      transparent 20%);
}

HTML #

<div id='outer-parent'>
  <div id='inner-parent'>
    <div id='child'></div>
  </div>
</div>

已尝试的相关问题（均未解决） #

解决方案 #

这是Safari的渲染bug，它未正确监听vw单位在窗口缩放时的变化来更新径向渐变，可通过以下方法修复：

方法1：添加background-size强制重绘 #

给#child添加background-size属性，强制Safari在窗口尺寸变化时重新计算渐变：

#child {
  height: 100%;
  width: 100%;
  background-image: radial-gradient(ellipse 10vw 12vw at 50% 35%,
      red 80%,
      transparent 20%);
  background-size: 100% 100%; /* 新增 */
}

方法2：用百分比替代vw单位（适配逻辑允许时） #

如果可以用父元素的百分比定义椭圆尺寸，替换vw为百分比，Safari能正确响应容器尺寸变化：

#child {
  height: 100%;
  width: 100%;
  background-image: radial-gradient(ellipse 10% 24% at 50% 35%,
      red 80%,
      transparent 20%);
}

方法3：用伪元素模拟渐变 #

通过伪元素创建渐变，利用元素尺寸变化监听机制，让Safari准确响应：

#child {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#child::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10vw;
  height: 12vw;
  border-radius: 50%;
  background-color: red;
  box-shadow: 0 0 0 9999px transparent; /* 模拟渐变透明效果 */
}

方法4：JS触发重绘（兜底方案） #

如果CSS方法无效，用JavaScript监听窗口resize事件，强制触发元素重绘：

window.addEventListener('resize', () => {
  const child = document.getElementById('child');
  child.style.display = 'none';
  child.offsetHeight; // 触发重绘
  child.style.display = 'block';
});

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