Why does my CSS Animation not work in Safari 12? - html

Question

The title basically gives it away. I have an animation working just fine in Chrome (80) and Firefox (57), but does not work in Safari (12) at all.
What I expect to happen is a straight line is drawn across the screen diagonally, from left top to right bottom.
I've tried a dozen variations of my code, the following is one:
(all the variations I tried work perfectly fine in Chrome and Firefox)
#move {
top:0;
left:0;
width: 0;
height: 5px;
background: rgb(255, 255, 255);
position: absolute;
-webkit-animation-name: mymove;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-transform: rotate(var(--a));
-webkit-transform-origin: top left;
-webkit-animation-delay: 1s;
-moz-animation-name: mymove;
-moz-animation-duration: 3s;
-moz-animation-timing-function: linear;
-moz-animation-fill-mode: forwards;
-moz-transform: rotate(var(--a));
-moz-transform-origin: top left;
-moz-animation-delay: 1s;
-ms-animation-name: mymove;
-ms-animation-duration: 3s;
-ms-animation-timing-function: linear;
-ms-animation-fill-mode: forwards;
-ms-transform: rotate(var(--a));
-ms-transform-origin: top left;
-ms-animation-delay: 1s;
-o-animation-name: mymove;
-o-animation-duration: 3s;
-o-animation-timing-function: linear;
-o-animation-fill-mode: forwards;
-o-transform: rotate(var(--a));
-o-transform-origin: top left;
-o-animation-delay: 1s;
animation-name: mymove;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform: rotate(var(--a));
transform-origin: top left;
animation-delay: 1s;
}
#-webkit-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
#-moz-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
#-ms-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
#-o-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
#keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
a shorter one:
#move {
top:0;
left:0;
width: 0;
height: 5px;
background: rgb(255, 255, 255);
position: absolute;
animation: mymove 3s;
animation-fill-mode: forwards;
transform-origin: top left;
transform: rotate(var(--a));
}
#keyframes mymove {
to {
width: var(--w);
}
}
The HTML:
<div id="move"></div>
I tried to consider:
webkit:
Why is my CSS3 animation not working in Chrome or Safari?
CSS3 animation: Not loading in Safari
Transform: rotate doesn't work in Safari
Splitting up the shorthand notation:
CSS3 animation not working in safari
Delaying the animation:
CSS3 animation not working in safari
None of what I tried seem to work in Safari. What am I missing here? Any help would be very much appreciated!

Answer 1

I had a very similar issue. Like the OP, I was setting up the keyframe using the 'to' property:
#keyframes dash {
to {
dash-offset: 0;
}
}
This seems to be fine with Chrome and Firefox. I discovered that Safari and iOS Safari require the 'from' property to be set as well. This is contrary to MDN's claim that 'If a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element's existing styles for the start/end states.'
I was animating a dynamic element, so I ended up using the Web Animations API to describe an animation that all browsers could understand:
const lineAnimationTiming: EffectTiming = {
duration: 1000,
easing: 'ease-in-out'
};
const length = line.getTotalLength();
line.style.strokeDasharray = `${length} ${length}`;
line.animate(
[
{ strokeDashoffset: length },
{ strokeDashoffset: 0 }
],
lineAnimationTiming
);
EDIT Sep 3, 2021:
Testing Safari using vanilla HTML/Javascript/CSS, this issue does not reproduce. See this Stackblitz.
I happened to be using Angular when I first encountered the issue. This issue does reproduce there. See this Stackblitz. Reported to Angular as this bug.