0

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.

SoLow
  • 137
  • 2
  • 12
  • check this link, maybe it will help you: [https://stackoverflow.com/questions/27245673/svg-image-element-not-displaying-in-safari](https://stackoverflow.com/questions/27245673/svg-image-element-not-displaying-in-safari) – Nelsongt77 Mar 01 '22 at 17:14
  • 1
    Why would you add window.location.href isn't object.id enough given that the id is local? – Robert Longson Mar 01 '22 at 17:27
  • @RobertLongson for safari it's not according to https://github.com/sveltejs/svelte/issues/3450 – SoLow Mar 01 '22 at 18:17
  • That's if you set a base tag. Are you doing that? Do you know you need that or are you just cargo culting it? – Robert Longson Mar 01 '22 at 19:07
  • Not all examples contained base tag and this is the only thing that I found that's related to svg not displaying properly in safari on the internet. The only difference that makes me think that this is not the problem is the fact that svg is rendered correctly for first time so the DOM knows how to solve fill url. I don't understand what crashes in safari when I change something in DOM, that it just stops displaying this svg. – SoLow Mar 01 '22 at 19:45
  • Report it as a [webkig bug](https://bugs.webkit.org/) – Robert Longson Mar 02 '22 at 10:00

1 Answers1

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.

SoLow
  • 137
  • 2
  • 12