CSS Gradients Rendering Incorrectly in Browser?

Question

I'm doing some custom coding in Squarespace. I am having a strange thing happen that I've never seen before. I am trying to add a hard-stop gradient mask to a div (textbox) so that I can create a wavy edge.

This is the code I put into the custom CSS (tested to be working in Codepen):

--mask:
  radial-gradient(8.20px at 50% 11.50px,#000 99%,#0000 101%) calc(50% - 10px) 0/20px 100%,
  radial-gradient(8.20px at 50% -6.5px,#0000 99%,#000 101%) 50% 5px/20px 100% repeat-x;
 -webkit-mask: var(--mask);
  mask: var(--mask);

But then I browse the inspector and observe that the browser changes the values and renders it differently in the preview (sorry, the site is currently unpublished so I cannot share the link):

--mask:
  radial-gradient(8.2px at 50% 11.5px,#000 99%,#000 0 101%) calc(40%) 0px 100%,
  radial-gradient(8.2px at 50% -6.5px,#000 0 99%,#000 101%) 50% .25px 100% repeat-x;
 -webkit-mask: var(--mask);
  mask: var(--mask);

And thus, the mask is not visible.

Has anyone run into this type of issue? How can I fix this?

Answer 1

Another way to write the code and avoid issues:

.box {
-webkit-mask:
  radial-gradient(8.2px at 50% 11.5px,#000 99%,#0000 101%) -10px 0,
  radial-gradient(8.2px at 50% -6.5px,#0000 99%,#000 101%) 0 5px repeat-x;
 -webkit-mask-size: 20px 100%;
 
 
 background: red;
 height: 100px;
}

<div class="box"></div>