[v5] Radial progress on Safari breaks when --value changes

[amir20]

Hello,

While updating to v5, I noticed one of my components is not behaving correctly:

<div
    class="radial-progress text-primary text-sm [--size:4rem] [--thickness:0.25em] md:text-base md:[--size:5rem]"
    :style="`--value: ${Math.floor((weightedStats[host.id].weighted.totalMem / host.memTotal) * 100)};`"
    role="progressbar"
  >
    {{ formatBytes(weightedStats[host.id].weighted.totalMem, 1) }}
  </div>
</div>

In Chrome

However, in Safari when --value changes, I noticed it jumps for a second:

Area.mp4

I tried reproducing this in Playground, but was not successful.

I am guessing radial progress has some kind of animation now? I am not sure how to go about debugging this.

Any suggestions?

[amir20]

Removing transition: --radialprogress .3s linear; does seem to fix the problem. @saadeghi perhaps this is a bug with safari?

[saadeghi]

I couldn't see the issue in Safari.
Isn't the about the way you're setting the value? What's the live value of ${Math.floor((weightedStats[host.id].weighted.totalMem / host.memTotal) * 100)}? is it integer? could it be null or undefined sometimes maybe that would lead to a not-integer value? 🤔

[amir20]

It doesn't always happen. But I am getting it consistently right now. Checkout https://l.dozzle.dev. I have added console logs.

[Log] cpu – 0 (main-BpF4n0Mb.js, line 43)
[Log] mem – 0 (main-BpF4n0Mb.js, line 43)
[Log] cpu – 0 (main-BpF4n0Mb.js, line 43)
[Log] mem – 0 (main-BpF4n0Mb.js, line 43)
[Log] cpu – 0 (main-BpF4n0Mb.js, line 43)
[Log] mem – 6 (main-BpF4n0Mb.js, line 43)
[Log] cpu – 0 (main-BpF4n0Mb.js, line 43)
[Log] mem – 11 (main-BpF4n0Mb.js, line 43)
[Log] cpu – 1 (main-BpF4n0Mb.js, line 43)
[Log] mem – 15 (main-BpF4n0Mb.js, line 43)
[Log] cpu – 2 (main-BpF4n0Mb.js, line 43)
[Log] mem – 18 (main-BpF4n0Mb.js, line 43)
[Log] cpu – 2 (main-BpF4n0Mb.js, line 43)
[Log] mem – 20 (main-BpF4n0Mb.js, line 43)
[Log] cpu – 2 (main-BpF4n0Mb.js, line 43)
[Log] mem – 22 (main-BpF4n0Mb.js, line 43)
[Log] cpu – 1 (main-BpF4n0Mb.js, line 43)

Values are always integer.

I never see it as null or undefined.

Safari.mp4

My workaround right now is to use transition-none. However, I do remember a long time ago when I was trying to animate a radial progress I was running into the same problem in Safari.

If you go to https://l.dozzle.dev, you can open web console and see similar output or also look at --value change.

[amir20]

@saadeghi I have cut it down to smallest component possible

<template>
  <ul class="grid gap-4 md:grid-cols-[repeat(auto-fill,minmax(480px,1fr))]">
    <li>
      <div class="card-body grid auto-cols-auto grid-flow-col justify-between gap-4">
        <div class="radial-progress" :style="`--value:${random};`" role="progressbar"></div>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
const random = ref(0);

useIntervalFn(
  () => {
    random.value = Math.floor(Math.random() * 10 + 30);
  },
  1000,
  { immediate: true },
);
</script>

And it is still happening. I was hoping to test with Playground, but I can't figure out how to run javascript.

broken.mp4

[saadeghi]

Thanks for the link. I see somehow the issue is font-size, after disabling the font-size classes and the font size rule of card-body the issue goes away…
It's weird that it only happens in Safari…
I will work on it tomorrow and it will be fixed in beta.2 Thanks for reporting and all the info!

[amir20]

Thank you Pouyan. I would have never guessed that.