使用大值时，Box-shadow不会在Safari中显示

Question

我正在开发一个使用JavaScript的小型库/插件，以动画方式突出显示不同的页面部分（旨在创建指令或类似内容），但是我发现了一些问题，尤其是Safari。

为了突出显示，我使用box-shadow，因为它比clip-path得到更广泛的支持。我创建了一个具有两个框阴影的Spotlight元素：一个是内部/插图（以提供渐变效果），另一个是外部（将覆盖页面上除突出显示的元素之外的所有内容）。

这是一些带有最少，完整和可验证示例的代码：

#sp-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#sp-focus {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 80px;
  height: 50px;
  border-radius: 100%;
  box-shadow: inset 0 0 8px 0 rgba(0,0,0,0.8), 0 0 0 200vmax rgba(0,0,0,0.4);
}

<div id="sp-frame">
  <div id="sp-focus">
    
  </div>
</div>

---

其想法是使其看起来像这样（位于要突出显示的元素上方）：

但是问题是在iPhone和Safari上看起来像这样：

---

我尝试了不同的解决方案，这些解决方案都在Stack Overflow中用英语（1和西班牙语（2和3）找到，例如使用供应商前缀-webkit-box-shadow和-moz-box-shadow或-webkit-appearance ...，但无法解决问题。

对于iPhone，我能够以一种奇怪的方式解决该问题：如果不是使用border-radius: 100%，而是使用border-radius: 99%，则阴影看起来很好（就像第一个图像一样）。但仍然无法在台式机/笔记本电脑上的Safari上崩溃。

最初，我认为vmax单位（Safari supports it）可能是一个问题，因为使用px值（例如200px）可以使其正常工作。因此，我尝试使用JavaScript计算屏幕的最大宽度/高度并将该值* 2分配给box-shadow ...，但是在运行一些测试后，它也不起作用。

真正的问题似乎是，如果Safari的阴影大于X像素（独立于单位）（X是围绕屏幕大小的值），那么Safari不会显示阴影。这是一个问题，因为我需要阴影大于屏幕尺寸，以避免出现非阴影区域。

这是一个错误吗？我该如何解决或解决这个问题？