SVG clip-path animation bug in Chrome/Chromium - html

Question

I'm new at animating SVGs with CSS and I'm trying to create a "blinking eye" effect. This is what I've managed to do:
https://codepen.io/pablo-m/pen/jOGeMpJ.
(Edit 3: Code added)
SVG
<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571.8 761.82">
<g id="Ojito">
<rect x="190.37" y="288.55" width="192.7" height="91.76" fill="#606060" />
<ellipse id="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" fill="#3caa56" />
<circle id="inner-eye" cx="291.69" cy="334.82" r="18.38" fill="#efefef" />
</g>
</svg>
SCSS
#composicion {
#Ojito {
#keyframes inner-eye-blink {
0%,
82%,
95%,
100% {
clip-path: ellipse(75% 55%);
}
90% {
clip-path: ellipse(75% 0);
}
}
#keyframes outer-eye-blink {
0%,
80%,
100% {
ry: 30.01px;
}
90% {
ry: 1px;
}
}
& #outer-eye {
animation: outer-eye-blink 8s ease infinite;
}
& #inner-eye {
animation: inner-eye-blink 8s infinite;
}
}
}
The animation works great on Firefox v95.0.2 and Safari v15.1. However, on Chrome/Chromium v97.0.4692.71 (as of today, the latest version) it does not. It looks like, whenever I apply a clip-path with css the white circle dissapears. I also noticed that this behaviour does not happen on Chrome/Chromium v96.0.4664.93. Am I doing something wrong or did something change in the latest version of Chrome/Chromium? Edit: If I did everything correctly, does anyone know a workaround?
This is my first question in SO, so please let me know if I missed any detail.
Thanks!
Edit: I have looked at Chromium's bug tracker but I've not found any relevant issues there.
Edit 2: Chromium bug reported

Answer 1

In a situation like this it is a good idea to use either a clip-path or a mask because you have more elements that need to be animated/masked off. In this example I chose CSS clip-path because you started off with the animation in CSS.
My example works fine in Chrome 97 as I see it.
Another option would be to use SVG animation with SMIL. I would expect it to work in Chrome as well. In some cases it is more flexible then mask or clip-path in CSS.
I used SvgPathEditor for constructing the path.
#keyframes eye-blink {
0%,
100% {
clip-path: path('M 3 5 C 6 6 9 7 13 5 C 9 2 6 3 3 5');
}
50% {
clip-path: path('M 3 5 C 6 5 9 5 13 5 C 9 5 6 5 3 5');
}
}
#Ojito g {
clip-path: path('M 3 5 C 6 6 9 7 13 5 C 9 2 6 3 3 5');
animation: eye-blink 4s ease infinite;
}
<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10" width="400">
<g id="Ojito">
<rect width="16" height="10" fill="#606060" />
<g>
<rect width="16" height="10" fill="white" />
<circle id="inner-eye" cx="8" cy="4.8" r="2" fill="#333" />
<circle id="inner-eye" cx="8" cy="4.8" r="1.2" fill="black" />
</g>
</g>
</svg>

Answer 2

It looks like it's a Chrome bug indeed. However, I managed to find a workaround which solves the issue: https://codepen.io/pablo-m/pen/WNZYeoB
SCSS
#composicion {
#Ojito {
#keyframes inner-eye-move {
0%,
5%,
20%,
25%,
40%,
45%,
50%,
60%,
65%,
80%,
85%,
100% {
cx: 291.69px;
cy: 334.82px;
}
10%,
15% {
cx: 273.69px;
cy: 328.82px;
}
30%,
35% {
cx: 291.69px;
cy: 342.82px;
}
70%,
75% {
cx: 310.69px;
cy: 328.82px;
}
90%,
95% {
cx: 307.69px;
cy: 338.82px;
}
}
#keyframes outer-eye-blink {
0%,
80%,
100% {
ry: 30.01px;
}
90% {
ry: 1px;
}
}
& .outer-eye {
animation: outer-eye-blink 8s ease infinite;
}
& #inner-eye {
clip-path: url(#eyeClip);
animation: inner-eye-move 50s ease infinite;
}
}
}
SVG
<svg id="composicion" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571.8 761.82">
<g id="Ojito">
<rect x="190.37" y="288.55" width="192.7" height="91.76" fill="#606060" />
<clipPath id="eyeClip">
<ellipse class="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" />
</clipPath>
<ellipse class="outer-eye" cx="292.3" cy="335.43" rx="44.72" ry="30.01" fill="#3caa56" />
<circle id="inner-eye" cx="291.69" cy="334.82" r="18.38" fill="#efefef" />
</g>
</svg>
I'll edit my question and answer when I post the bug on the Chrome bug tracker.
Edit: Chromium bug reported
Edit 2: For another great workaround, please look at #chrwahl's answer