CSS径向渐变浏览器不一致

Question

看看下面的两张图片。我使用径向渐变在相框上创建反射效果。当它在 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。在移动背景之前，渐变看起来被边框框的边界剪裁。

后者可以通过应用负边距并裁剪背景来修复。

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

但是，在 iOS 中，背景不会被剪裁，并且屏幕的大部分区域都可以看到白色眩光。有人对如何解决这个问题有任何想法吗？我非常仔细地浏览了 MDN 上的背景文档。我能想到的唯一解决方案是使用 JavaScript 根据用户代理应用不同的样式。

Answer 1

事实证明这很简单。我不必通过移动背景位置来定位渐变，而是只需使用径向渐变语法来定位它：

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