It would not work in iOS 16.2, but it surely’s works in iOS 17.4.1
I am testing animation utilizing linear-gradient for border-image.
I’ve checked that the majority browsers on Home windows are working correctly.
However after I checked it on my iPhone, gradient isn’t represented.
Is there a method to make use of variables?
If that model would not help it, I will strive one other method.
I would respect it in case you might give me a solution.
Code
The iPhone’s browser doesn’t specific the gradient when utilizing variables.
* {
box-sizing: border-box;
}
html, physique {
margin: 0;
}
@property --angle {
syntax: "";
inherits: true;
initial-value: 0deg;
}
.wrap {
show: flex;
}
.border-animation {
place: relative;
width: 300px;
peak: 300px;
border: 10px strong #fff;
border-image: linear-gradient(var(--angle), crimson 0%, blue 100%);
border-image-slice: 1;
animation: autoRotate 1s infinite;
margin-right: 20px;
}
.border-animation-without-variable {
place: relative;
width: 300px;
peak: 300px;
border: 10px strong #fff;
border-image: linear-gradient(0deg, crimson 0%, blue 100%);
border-image-slice: 1;
animation: autoRotate 1s infinite;
}
@keyframes autoRotate {
to {
--angle: 360deg;
}
}
Doc
With variable
With out variable
