带有 css 的 svg 动画不适用于 safari

Question

我正在尝试为滚动上的 SVG 设置动画。它主要是用于过渡的 CSS。 CSS 在 android 和 windows 上运行良好，但在所有 Apple 设备上都会中断。我也包含了供应商前缀，还使用 caniuse 检查了 CSS 与 safari 的兼容性。一切似乎都井然有序。但我肯定在这里遗漏了一些东西。

这是我的代码：

<style>
    @import url("https://fonts.googleapis.com/css2?family=Dongle:wght@700&display=swap");

    body {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        min-height: 1000px;
        background-color: #fddad8;
    }

    .dongle {
        font-family: "Dongle", sans-serif;
    }

    nav svg {
        display: inline-block;
        width: 158px;
        height: 42px;
    }

    nav svg text {
        display: inline-block;
    }

    #myName text:nth-child(2) {
        opacity: 1;
        -webkit-transition: opacity 1.2s ease, -webkit-transform 0.6s ease;
        transition: opacity 1.2s ease, transform 0.6s ease;
        -webkit-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }

    #myName text:nth-child(4) {
        opacity: 1;
        -webkit-transition: opacity 1.2s ease, -webkit-transform 0.6s ease;
        transition: opacity 1.2s ease, transform 0.6s ease;
        -webkit-transition-delay: 0.5s;
        transition-delay: 0.5s;
    }

    #myName text:nth-child(3) {
        -webkit-transition: -webkit-transform 0.8s ease;
        transition: transform 0.8s ease;
    }

    #myName.initialsOnly text:nth-child(2) {
        opacity: 0;
        -webkit-transform: translate(-30px, 0) scale(0.1);
        transform: translate(-30px, 0) scale(0.1);
        -ms-transform-origin: right;
        -webkit-transform-origin: right;
        -moz-transform-origin: right;
        -o-transform-origin: right;
        transform-origin: right;
        -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    #myName.initialsOnly text:nth-child(4) {
        opacity: 0;
        -webkit-transform: translate(-30px, 0) scale(0.1);
        transform: translate(-30px, 0) scale(0.1);
        -webkit-transform-origin: right;
        transform-origin: right;
        -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    #myName.initialsOnly text:nth-child(3) {
        /* -webkit-transform: translate(-160px, 0);
    transform: translate(-160px, 0); */

        transition: -webkit-transform 0.8s ease;
        transition: transform 0.8s ease;
        -webkit-transform: translate(-160px, 0);
        transform: translate(-160px, 0);
    }

    #myName text:nth-child(5) {
        opacity: 0;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    #myName.initialsOnly text:nth-child(5) {
        opacity: 1;
        -webkit-transform: translate(-170px, 0);
        transform: translate(-170px, 0);
        -webkit-transition-delay: 1.2s;
        transition-delay: 1.2s;
        -webkit-transition: opacity 0.4s ease-in-out, -webkit-transform 0.6s ease;
        transition: opacity 0.4s ease-in-out, transform 0.6s ease;
    }
</style>
<svg id="myName" class="d-inline-block align-text-top dongle" viewBox=" 0 0 400 100" xmlns="http://www.w3.org/2000/svg">
    <text x="0" y="74" font-size="132" font-family="dongle">
        <tspan fill="#9B2E27">r</tspan>
    </text>
    <text x="34" y="72" font-size="122" font-family="dongle" fill="#B8726E">atul </text>
    <text x="200" y="74" font-size="132" font-family="dongle">
        <tspan fill="#9B2E27">k</tspan>
    </text>
    <text x="244" y="72" font-size="122" font-family="dongle" fill="#B8726E">eot</text>
    <text x="260" y="72" font-size="152" font-family="" fill="#B8726E">.</text>
</svg>
<script>
    function updateNameClass() {
        if ($(window).scrollTop() > 100) {
            $("#myName").addClass("initialsOnly");
        } else {
            $("#myName").removeClass("initialsOnly");
        }
    }
    $(window).scroll(function () {
        updateNameClass();
    });
</script>

这是代码笔链接：https://codepen.io/ratulkt/pen/MWPwYgo 任何改进这一点的指针也很受欢迎。谢谢