很棒的css动画在iOS上不起作用，甚至在类和@-webkit关键帧上设置-webkit

除了我的手机（iPhone8），我的以下cshtml文件内容在所有浏览器上都能正常工作。在安卓手机上，它运行良好。 我还在所有关键帧和所有类上添加了前缀

-webkits-

，如您在以下代码行中看到的：

<div class="footer-top section bg-white m-0 p-0" id="footer">

<svg width="100%" height="100%" viewBox="0 0 100 25">
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="
       1 0 0 0 0
       0 1 0 0 0
       0 0 1 0 0
       0 0 0 13 -9" result="goo" />
            <xfeBlend in="SourceGraphic" in2="goo" />
        </filter>
        <path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
    </defs>

    <use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2"></use>
    <use id="wave2" class="wave" xlink:href="#wave" x="0" y="0"></use>
    <use id="wave4" class="wave" xlink:href="#wave" x="0" y="2"></use>


    <g class="gooeff" filter="url(#goo)">
        <circle class="drop drop1" cx="20" cy="2" r="8.8" />
        <circle class="drop drop2" cx="25" cy="2.5" r="7.5" />
        <circle class="drop drop3" cx="16" cy="2.8" r="9.2" />
        <circle class="drop drop4" cx="18" cy="2" r="8.8" />
        <circle class="drop drop5" cx="22" cy="2.5" r="7.5" />
        <circle class="drop drop6" cx="26" cy="2.8" r="9.2" />
        <circle class="drop drop1" cx="5" cy="4.4" r="8.8" />
        <circle class="drop drop2" cx="5" cy="4.1" r="7.5" />
        <circle class="drop drop3" cx="8" cy="3.8" r="9.2" />
        <circle class="drop drop4" cx="3" cy="4.4" r="8.8" />
        <circle class="drop drop5" cx="7" cy="4.1" r="7.5" />
        <circle class="drop drop6" cx="10" cy="4.3" r="9.2" />

        <circle class="drop drop1" cx="1.2" cy="5.4" r="8.8" />
        <circle class="drop drop2" cx="5.2" cy="5.1" r="7.5" />
        <circle class="drop drop3" cx="10.2" cy="5.3" r="9.2" />
        <circle class="drop drop4" cx="3.2" cy="5.4" r="8.8" />
        <circle class="drop drop5" cx="14.2" cy="5.1" r="7.5" />
        <circle class="drop drop6" cx="17.2" cy="4.8" r="9.2" />
        <use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
    
      </g>       
        <path   id="wave1"  class="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
      </g>
    
</svg>

该动画在除iOS之外的所有浏览器中都运行良好。我用的是iPhone8

我试过几条建议，其中也有一条。但这并不能解决我的问题

在安卓手机上，它运行良好

---

有什么想法吗？

您的代码不仅在iOS中不起作用，而且在macOS上的Safari中也不起作用，这是一个奇怪的问题，但在

feColorMatrix

中出现错误，请将

值移动到一行

<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0
                                               0 1 0 0 0
                                               0 0 1 0 0
                                               0 0 0 13 -9" 
result="goo" />

您的代码不仅在iOS中不起作用，在macOS上的Safari中也不起作用，这是一个奇怪的问题，但在feColorMatrix中出现错误，请将
值移动到一行

<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0
                                               0 1 0 0 0
                                               0 0 1 0 0
                                               0 0 0 13 -9" 
result="goo" />


有时，将带有“供应商”前缀的属性放在第一行是有效的（无论如何都是首选方式）。我没有苹果，所以我不能测试。我刚试过。不幸的是，它不起作用。我在iPhone8上运行的是iOS 13.6。有时候，它可以将带有“供应商”前缀的属性放在第一行（无论如何都是首选方式）。我没有苹果，所以我不能测试。我刚试过。不幸的是，它不起作用。我在iPhone 8上运行iOS 13.6。嗨，维多利亚，太好了。你是对的。现在它工作得很好！你好，维多利亚，太好了。你是对的。现在它工作得很好！