web-animations/web-animations-js

Animating fill color doesn't work in Safari

alejandro-isaza opened this issue · 2 comments

Tried Version 12.0.2 (14606.3.4)

elem.animate({
    fill: ['#25ADFF', '#50E3C2'],
}, {
    duration: 1000,
});

This is still an issue.

The following works in Chrome, but not in Safari.

static rounded_1ShapeAnimation0() {
    return document.querySelector('#Timeline .rounded_1-svg').animate({
        fill: ['#00F8FF', '#0000FF'],

    }, {
        delay: 0,
        duration: 1000,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}

I've attached a zip folder with a working example that uses the code above.
Timeline.zip

Does anyone have an idea on how to solve this?

I second this, would be lovely to have this fixed!