<q-spinner-tail> rendering bug when using display: none

[SilPho]

What happened?

When the first on a page has its display attribute set to "none", it causes a rendering glitch on all subsequent elements.

Strangely, if the first is visible then it doesn't matter what display state the others have.

What did you expect to happen?

"display: none " should not have an effect on any other elements.

Reproduction URL

https://jsfiddle.net/3mks056g/6/

How to reproduce?

1. Go to the provided JSFiddle page
2. Observe that the first spinner is hidden as expected
3. Observe that the others don't look correct.
4. Try editing the "display: none" definition to see that this bug only happens when its on the first spinner

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Microsoft Edge

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[rstoenescu]

Hi,

This doesn't makes any sense. It's at best a browser glitch, and not sure that we can do anything about it, unfortunately... The spinners are just svg-s and the style applied to one should not interfere with the rendering of the others.

[rstoenescu]

Safari, out of all the browsers, seems to display all svg-s correctly.

[SilPho]

This doesn't makes any sense. It's at best a browser glitch, and not sure that we can do anything about it, unfortunately... The spinners are just svg-s and the style applied to one should not interfere with the rendering of the others.

Agreed, it doesn't make a bit of sense to me either. I figured a browser glitch was pretty likely, but since it happens on Firefox, and Edge/Chrome, it's not just tied to one renderer. Puzzling.

I figured I might as well report it, but I won't be offended if you just close the issue.