除了在我的手机(iPhone 8(上，以下cshtml文件内容在所有浏览器上都能完美工作。在安卓手机上运行良好。我还在所有@keyframes和所有类上添加了前缀-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>
以及相关的css样式表：
.footer-top {
--col-deepblue: #4478e3;
width: 100vw;
height: auto;
overflow: auto;
position: relative;
margin: 0;
padding: 0;
}
svg {
width: 100%;
overflow: auto;
overflow-x: hidden;
}
.wave {
animation: wave 3s linear;
animation-iteration-count: infinite;
fill: #222222;
-webkit-animation: wave 3s linear;
-webkit-animation-iteration-count: infinite;
}
.drop {
fill: var(--col-deepblue);
xfill: #99000055;
animation: drop 3.2s linear infinite normal;
stroke: var(--col-deepblue);
stroke-width: 1;
transform: translateY(25px);
transform-box: fill-box;
transform-origin: 50% 100%;
/*-webkit-*/
-webkit-text-stroke: var(--col-deepblue);
-webkit-text-stroke-width: 1;
-webkit-animation: drop 3.2s linear infinite normal;
-webkit-transform: translateY(25px);
-webkit-transform-box: fill-box;
-webkit-transform-origin: 50% 100%;
}
.drop1 {
}
.drop2 {
animation-delay: 3s;
animation-duration: 3s;
-webkit-animation-delay: 3s;
-webkit-animation-duration: 3s;
}
.drop3 {
animation-delay: -2s;
animation-duration: 3.4s;
-webkit-animation-delay: -2s;
-webkit-animation-duration: 3.4s;
}
.drop4 {
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
}
.drop5 {
animation-delay: 2.7s;
animation-duration: 3.1s;
-webkit-animation-delay: 2.7s;
-webkit-animation-duration: 3.1s;
}
.drop6 {
animation-delay: -2.1s;
animation-duration: 3.2s;
-webkit-animation-delay: -2.1s;
-webkit-animation-duration: 3.2s;
}
.gooeff {
filter: url(#goo);
-webkit-filter: url(#goo);
}
#wave2 {
animation-duration: 5s;
animation-direction: reverse;
-webkit-animation-duration: 5s;
-webkit-animation-direction: reverse;
opacity: .6
}
#wave3 {
animation-duration: 7s;
-webkit-animation-duration: 7s;
opacity: .3;
}
#wave4 {
animation-duration: 9s;
-webkit-animation-duration: 9s;
opacity: .5;
}
@keyframes drop {
0% {
transform: translateY(25px);
}
30% {
transform: translateY(-10px) scale(.1);
}
30.001% {
transform: translateY(25px) scale(1);
}
70% {
transform: translateY(25px);
}
100% {
transform: translateY(-10px) scale(.1);
}
}
@-webkit-keyframes drop {
0% {
-webkit-transform: translateY(25px);
}
30% {
-webkit-transform: translateY(-10px) scale(.1);
}
30.001% {
-webkit-transform: translateY(25px) scale(1);
}
70% {
-webkit-transform: translateY(25px);
}
100% {
-webkit-transform: translateY(-10px) scale(.1);
}
}
@keyframes wave {
to {
transform: translateX(-100%);
}
}
@-webkit-keyframes wave {
to {
-webkit-transform: translateX(-100%);
}
}
@supports (-webkit-backdrop-filter: blur(1px)) {
svg {
height: 100%;
}
}
该动画在除iOS外的所有浏览器中都能正常工作。我用的是iPhone 8。
我试过几个建议，其中也有这个。但这并不能解决我的问题。
在安卓手机上运行良好。
知道吗？
您的代码不仅在iOS中不工作，而且在macOS上的Safari中也不工作，这是一个奇怪的问题，但在feColorMatrix中出现了错误，将values移动到一行
<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" />