Box-shadow doesn't display in Safari when using large values

Question

I am developing a small library/plugin with JavaScript to highlight different page sections in an animated way (with the intention to create instructions or similar), but I am finding some issues, specially with Safari.

For the highlighting, I use box-shadow because it is more widely supported than clip-path. I create a spotlight element with two box shadows: one is internal/inset (to give a gradient effect) and another outside (that will cover everything on the page but the highlighted element).

Here is some code with a minimal, complete, and verifiable example:

#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>

---

The idea is for it to look like this (positioned on top of the element to be highlighted):

But the problem is that on iPhone and Safari it looks like this:

---

I tried different solutions that I found both in Stack Overflow in English (1) and in Spanish (2 and 3), like using the vendor prefixes -webkit-box-shadow and -moz-box-shadow, or -webkit-appearance... but it didn't fix the issue.

For iPhone, I was able to solve the problem in a strange way: if instead of using border-radius: 100%, it was border-radius: 99%, the shadow looks fine (like the first image). But still it breaks on Safari on a desktop/laptop.

Initially I thought it could be a problem with the vmax units (Safari supports it), as using a px value (e.g. 200px) made it work. So I tried calculating the max of width/height of the screen with JavaScript and assigning that value * 2 to the box-shadow... but after running some tests, it didn't work either.

The real problem seems to be that Safari doesn't display a shadow if it's larger than X pixels independently of units (X being a value around the size of the screen). And that is an issue because I need the shadow to be larger than the screen size to avoid having non-shaded areas.

Is this a bug? How can I solve this issue or go around it?