Loading spinner has artifacts in some rotations

[deepbluev7]

Description

I get the above artifacts around the loading spinner on initial load.

Steps to reproduce

• Open element-web (best case you have an old session)

It should not have a rotating square around the loading indicator.

Logs being sent: yes/no

Version information

• Platform: Web

For the web app:

• Browser: Firefox 89
• OS: Gentoo
• URL: riot.neko.dev

[HarHarLinks]

if this is going to be revised, the spinner could use some fresh paint anyway 😇

sadly the labs logo spinner, while pretty, is gone. but the current spinner does not fit the app's otherwise modern and flat look imo. further i often find it somehow manages to look not sharp, feels like i'm scaling it but it's a gif?

[deepbluev7]

Yeah, I only noticed this now, since I was using the labs spinner for ages and that didn't have this issue.

[SimonBrandner]

For a more modern spinner: matrix-org/matrix-react-sdk#6083

[robintown]

I'm fairly certain that this is not an issue with the spinner itself, but rather Firefox 89. I only noticed this after the upgrade to FF 89, which I noticed finally switched over to WebRender on my machine, and I suspect this is why others are just noticing it too.

[deepbluev7]

That could be, but I only experience this issue after upgrading to an element version without the fancy element logo spinner, so I assumed it was related to that. (I do have webrender enabled though)

[robintown]

@deepbluev7 Yes, the way the spinner is rendered was recently changed as well (to be a rotating SVG mask rather than a GIF), so that is why this only happens in recent versions

[robintown]

https://bugzilla.mozilla.org/show_bug.cgi?id=1616326 appears to be where this is tracked

[licentiapoetica]

a temporary fix is to make a little custom css with the following contents:

.mx_Spinner_icon {
  background-color: #000;
  filter: invert(100);
}

[robintown]

This was somehow magically fixed by matrix-org/matrix-react-sdk#6083, and I have no idea why