Open robsontenorio opened 7 months ago
I can reproduce it on daisyUI site.
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.
https://github.com/saadeghi/daisyui/assets/118955/3e0eb417-bf1e-4805-857d-a67740e53f72
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?
@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>
what if you inject both loading
and loading-spinner
?
@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>
@saadeghi
Can we consider this is definitely a Safari bug without any workarounds for now ?
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 🫣
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?
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
).But not happens with dev version with
yarn dev
.Am I missing something?
https://github.com/saadeghi/daisyui/assets/118955/a497469d-1642-4445-8016-2839c83d82a5