iPhone端`background-repeat: round;`表现与`repeat`一致的兼容性问题咨询

各位大佬好，我最近在实现一个邮票齿边的CSS效果时，遇到了iOS端浏览器的兼容性问题，想过来求助一下。

先上我的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: black;
            color: white;
        }
        .stamp-border {
            text-align: center;
            /* Change this value to adjust the stamp perforation size: */
            --radius: 6px;
            --offset-x: 0;
            --offset-y: 0;
            background-image: radial-gradient(circle var(--radius) at center, transparent 50%, red 50.5%);
            background-repeat: round;
            background-position: calc(var(--offset-x) * var(--radius) * cos(45deg)) calc(var(--offset-y) * -1 * var(--radius) * sin(45deg));
            background-size: calc(var(--radius) * 1) calc(var(--radius) * 1);
        }
    </style>
    <title>Computers</title>
</head>
<body>
    <header class="stamp-border">
        <h1>Computers</h1>
    </header>
</body>
</html>

正常情况下，这个效果的表现很理想：background-repeat: round 会让径向渐变生成的圆形完美适配header的宽度，所有圆形都完整显示，不会出现截断。

但我在iPhone设备上测试时（分别用了iPhone 12和16，浏览器包括Safari和基于Chrome内核的Brave），发现这个效果完全不符合预期——背景看起来就像是把background-repeat设置成了repeat而不是round，具体表现是header右侧的圆形被截断了，没有完整显示出来。

有没有朋友遇到过iOS端浏览器对background-repeat: round的兼容问题？或者有没有什么替代方案可以实现这种完整的邮票齿边效果，同时能在iPhone端正常渲染？

内容来源于stack exchange