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.
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.