I have the following cshtml file content working perfectly on all browsers, except on my mobile (iPhone 8). On Android mobiles it works fine.
I've also added everywhere where necessary the prefix -webkits- on all @keyframesand on all classes as you can see in the following code-lines:
<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>
and the related css style sheet:
.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%;
}
}
The animation works well in all browsers except on iOS. I'm using an iPhone 8.
I've tried several suggestions, among them also this one. But it does not solve my problem.
On Android mobile it works fine.
Any idea?
Your code doesn't work not only in iOS but also in Safari on macOS, this is a strange problem, but an error in feColorMatrix, move values to one line
<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" />