Letter avatars are all grey

[weeman1337]

Steps to reproduce

1. Open current develop https://develop.element.io/
2. Look at the avatars

Outcome

What did you expect?

Colours 🖌️

What happened instead?

They are all grey 😐

Operating system

Ubuntu 22.04.3 LTS

Browser information

Firefox 117.0

URL for webapp

https://develop.element.io/

Application version

Version von Element: 780da23-react-09c5e06d12ac-js-c5245a887b67 Version von Olm: 3.2.14

Homeserver

matrix.org

Will you send logs?

No

[MTRNord]

This happens for me too on darkmode :)

In version: Version von Element: 780da23-react-9fb7d94c2bc8-js-c5245a887b67
Version von Olm: 3.2.14

[MTRNord]

It seems like the variable exists but the bg css not

[germain-gg]

This is really strange, things load perfectly fine on my develop.element.io , both for light and dark theme.

[MTRNord]

That smells like a caching issue potentially? In the past this happened with the language files which is why they had a cachebuster hash attached. Not sure however if that even does something these days still

Edit: Even after forcefully removing the page cache and reloading this bug remains.

[germain-gg]

Not really, because the design tokens are included in there from the day where Element started using the new colour set.

In here, something makes them either not being applied, but i am yet to figure out what triggers this, continuing the conversation in https://matrix.to/#/#element-dev:matrix.org

[plui29989]

Hi,
avatar letters are still grey for me - only in firefox though. Other browsers (Safari, Chrome) seem to be unaffected.
I'm using
Element-Web 1.11.41
Firefox 117.0

[ftyers]

I'm running 1.11.41 too and it's the same in Firefox.

[DoruDoLasu]

yep, just updated. on firefox. not only the username colours look worse (imo) but also that

[ManuelHu]

Just some investigation I just did:
Toggling layout.css.has-selector.enabled in Firefox's about:config "fixes" the issue. Firefox is currently the only mainstream browser not supporting the CSS :has() selector.

And this selector is used to style the avatar in element 1.11.41.

This has been fixed in element-hq/compound-web@1361a4a, but apparently did not make it into the release :-/

[ftyers]

@ManuelHu Thanks! I tried enabling that but it still looks the same. I also tried force-refreshing. Isn't it the only browser that isn't based on Chromium too? Any idea of when the next release will be (that will include that fix) ?

[ManuelHu]

I am using the beta version of Firefox (118) and there just toggling the pref in about:config and force-reloading Element shows colored avatars.
But anyway, the real fix is in the compound repo, the above was just for testing (it probably has some reasons that the firefox setting is off by default...)

I am not following the Element development closely, but on the develop branch the compound fix is already available.

[t3chguy]

Tracked in #26155