svg is not rendering properly after update in safari

Question

I'm working on React project and I implemented gradient generator that is used for icons. The problem is that on chrome everything works fine, but safari renders the icon normally only first time, for example, if I do some update action like change view to mobile or change state of component it turns black. When I switch between icons it regenerates until I repeat the scenario.

I read that the common problem with safari is that url path is not resolved right, but as you can see I already done that, it's not working even when the path is hardcoded. Also tried to disable canvas rendering in safari.

<svg
    width={72}
    height={26}
>
    <defs>
        <linearGradient id={object.id}>
            {this.generateStops(object.depthColors ? object.depthColors : [])}
        </linearGradient>
    </defs>
    <rect width={72} height={26} fill={`url(${window.location.href}#${object.id})`}/>
</svg>

I think I won't add more code since the problem is not with stops generation, it always returns correctly generated stops. Also I tried to add various parameters to svg like id, viewbox, but it didn't help.

Answer 1

What I ended up doing is this:

const random = Math.random().toString();

return (
    <svg
        width={72}
        height={26}
    >
        <defs>
            <linearGradient id={random}>
                {this.generateStops(colorPalette.depthColors ? colorPalette.depthColors : [])}
            </linearGradient>
        </defs>
        <rect width={72} height={26} fill={`url(#${random})`}/>
    </svg>
);

Previous version also used unique id's for gradient generation, but it didn't refresh every time when the same gradient is selected.