bug: Loading spinner on Safari

[robsontenorio]

What version of daisyUI are you using?

4.4.4

Which browsers are you seeing the problem on?

Safari, Safari iOS

Reproduction URL

there is no ...

Describe your issue

Just notice on builded version this issue happens (yarn build).

• Simple refresh freezes (cmd+R)
• Hard refresh works (option+cmd+R)
• Then, a simple refresh again make it freezes.

But not happens with dev version with yarn dev.

Am I missing something?

spinner3.mov

[robsontenorio]

I can reproduce it on daisyUI site.

• Simple refresh: spinner stops
• Then I did hard refresh (option+cmd+R) then it works again.

In my case is problematic, because when app make some internal browser url redirects the spinners won't work on next screens, like button spinner on forms.

daisy.mov

[saadeghi]

Interesting…

That's definitely a Safari bug. I tried to see if changing the order of CSS rules (mask-image and -webkit-mask-image) would make it work but the bug still happened. The problem is the CSS animation inside the SVG. It is expected to work and we can't extract that animation out of the SVG because daisyUI can't manually put a SVG inside the HTML and animate it. The SVG has to be inside the CSS mask and the animation has to be inside the SVG.

I will research more to find a way for it.
As a temporary workaround and to prevent this bug to break Mary, looks like adding the loading class names after render prevents the bug?

[robsontenorio]

@saadeghi Yes I tried it. But, bug remains when I inject class at runtime with some JS.

<span class="<inject 'loading' after some action>  loading-spinner loading-xs"></span>

[saadeghi]

what if you inject both loading and loading-spinner?

[robsontenorio]

@saadeghi Same issue. Here is a snippet

1. Simple refresh: bug
2. Hard refresh: works
3. Simple refresh again: bug

<span id="spin" class=""></span>
<button onclick="document.getElementById('spin').classList.add('loading', 'loading-spinner')">run</button>

[robsontenorio]

@saadeghi

Can we consider this is definitely a Safari bug without any workarounds for now ?

[saadeghi]

It is a Safari bug. I hope it gets fixed in the next Safari update 🤞
A workaround would be using SVG <animate> tag for animations instead of CSS animation but it's not easy to replicate the exact same CSS animation with that 🫣

[OptimusCrime]

I can confirm that this is still a problem today. The spinner:

        <span className="loading loading-spinner loading-lg"></span>

Does not animate at all in Safari (both desktop and on iOS), and just the first bit of the loading icon is rendered. What is weird is that the animations works as expected in the docs page at https://daisyui.com/components/loading/ . Does anyone know why this is happening?

[scosman]

A simple workaround is:

.loading-spinner {
  mask-image: url("/images/spinner.svg");
}

Where the image is: https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-css/ring-resize.svg

I'm not sure if the SVG does something different, or if the url instead of inline fixes it. Either way it works.

[robsontenorio]

@scosman In my case unfortunately I can't use this workaround.

[scosman]

Over a year later maybe worth a library level patch? Safari team doesn't seem to think this is a priority.

@saadeghi ?

[saadeghi]

@scosman Yes! For daisyUI 5 loading animations will be using svg animations instead of inline CSS animation inside a encoded svg, which fixes the issue. I will add a patch soon to fix it in daisyUI 4 as well

[scosman]

Awesome, thank you!