Highlight color is muted

[jimmywarting]

I'm using dark mode and whenever i highlight some text then the cursor and highlighting color is totally gone! so annoying.
it started to happen maybe ~3 weeks ago on github. fyi i'm using dark mode.

You might not see it but here i have selected the "dark mode"

it's invisible

[simurai]

Hmm.. that's odd. I can't reproduce it. It should be a muted blue:

Screen.Recording.2023-04-03.at.16.44.51.mov

Not sure if it's browser/OS related? 🤔 I tested in Chrome/macOS.

[jimmywarting]

it happens to me in chrome and chrome canary.
but not brave and blink (which are both also Blink based)
FF and safari works fine.

When i hovered over color-accent-muted then it said: color-accent-muted is not defined.
changing the color to something inlined or disabling / removing this css rule works.

so maybe it's a variable scoping issue?

[simurai]

it said: color-accent-muted is not defined.

Weird. I can reproduce that too. But it seems the variable is still working:

Screen.Recording.2023-04-10.at.17.59.17.mov

Do you have any Chrome extension or user style installed? If this would be a widespread problem, we would probably have heard about it from more people.

[jimmywarting]

I have a few chrome extensions. but chrome canary have none. and it's a problem in chrome canary too.
i tried the "reset to default" and restarted chrome. then it became all fine.

i will now try to find out which flag caused it.

[jimmywarting]

apperantly it was caused by: #enable-experimental-web-platform-features

[simurai]

apperantly it was caused by: #enable-experimental-web-platform-features

Ohh.. interesting. I hope this is just a Chrome bug and not a permanent change that will be enabled one day. 😅

[jimmywarting]

For now i just wish for this to be fixed / worked around.

• either remove that css rule and just let browser do the default
• or inline the color (and don't use css variable on that particular css selector) - the other css variable works fine.

[jimmywarting]

i manage to create a minimal reproduction: https://jsfiddle.net/bq09ne35/1/
going to report it to chrome

[jimmywarting]

https://bugs.chromium.org/p/chromium/issues/detail?id=1432124

[jimmywarting]

Apparently more ppl have reported it already... my issue was merged into another existing one,
https://bugs.chromium.org/p/chromium/issues/detail?id=1412395

they say:

This is a known limitation of the spec that doesn’t yet have a good solution:

w3c/csswg-drafts#6641

and their issue have been closed as "wont fix"

another comment says:

GitHub support says they’ve opened an issue with their internal frontend team, so hopefully this will be fixed soon.

[jimmywarting]

new issues are poring in at chromium...

https://bugs.chromium.org/p/chromium/issues/detail?id=1434349

[simurai]

new issues are poring in at chromium...

Pretty sure they will have to fix it before moving that code to a stable release.

I'm gonna close this issue again. If you still wanna keep using #enable-experimental-web-platform-features, maybe you could override it with an extension and hardcode the hex value, like

::selection {
  background-color: #1f4274 !important;
}

[simurai]

We had to revert the fix since it caused other side effects.