CSS径向渐变浏览器兼容性问题求助

我用径向渐变给画框制作反光效果，通过CSS变量--reflection-x和--reflection-y动态调整背景位置，实现3D空间移动时的反光跟随效果，核心代码如下：

background-image: radial-gradient(50cqw, #ffffffff, transparent);
background-repeat: no-repeat;
background-position-x: var(--reflection-x);
background-position-y: var(--reflection-y);

在Safari（桌面/iOS）和Android设备上，渐变能正常延伸至画框边缘；但PC端Edge和Chrome中，渐变会被元素的border box提前截断。为解决Chrome/Edge的问题，我尝试了以下代码，却在iOS Safari上失效——背景未被裁剪，屏幕出现大片白色眩光：

margin: -75cqw;
clip-path: margin-box;

不想通过JavaScript检测用户代理来切换样式，以下是两个更靠谱的兼容方案：

方案1：伪元素承载渐变（推荐） #

将渐变放到元素的伪元素中，通过定位让伪元素覆盖原元素，设置足够大的尺寸容纳渐变，再依靠原元素的overflow: hidden裁剪超出部分，完美兼容所有现代浏览器：

.frame {
  position: relative;
  overflow: hidden;
  /* 保留画框原有样式：border、尺寸等 */
}

.frame::before {
  content: '';
  position: absolute;
  top: -75cqw;
  left: -75cqw;
  width: 250cqw; /* 足够大的尺寸，确保渐变移动时不会被截断 */
  height: 250cqw;
  background-image: radial-gradient(50cqw, #ffffffff, transparent);
  background-repeat: no-repeat;
  /* 调整位置偏移，保证反光位置和原逻辑一致 */
  background-position-x: calc(var(--reflection-x) + 75cqw);
  background-position-y: calc(var(--reflection-y) + 75cqw);
  pointer-events: none; /* 避免干扰原元素的交互事件 */
}

原理：伪元素脱离原元素的border box限制，足够大的尺寸确保渐变移动时不会被截断，最后通过原元素的overflow: hidden裁剪多余部分，既实现了需求，又避免了浏览器兼容性问题。

方案2：调整背景原点与内边距 #

如果不想使用伪元素，可通过扩展内边距并调整背景原点来实现：

.frame {
  padding: 75cqw;
  background-image: radial-gradient(50cqw, #ffffffff, transparent);
  background-repeat: no-repeat;
  background-position-x: calc(var(--reflection-x) + 75cqw);
  background-position-y: calc(var(--reflection-y) + 75cqw);
  background-origin: padding-box;
  overflow: hidden;
  /* 用负外边距抵消内边距对布局的影响 */
  margin: -75cqw;
}

这个方案的缺点是会影响元素的布局计算，需要额外处理布局偏移，灵活性不如伪元素方案。

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