Abnormal Text Selection Style on Share Page

[L33Z22L11]

Describe the bug

On the share page for user/subscription/list, selected text appears with a transparent background and white font color, which closely matches the page's background color. This reduces readability significantly and makes selected text difficult to distinguish in light color mode. Adjusting the selection style to improve contrast would enhance readability.

Feed Info

• https://app.follow.is/share/users/Zhilu
• https://app.follow.is/share/feeds/62533754566736896
• https://app.follow.is/share/lists/72840182614552576

Reproduction Video

No response

App Type

Web

Version

0.1.1-beta.1

Operating System

Windows 11

Browser Info

Microsoft Edge 130.0.2849.56

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.

Contributions

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests (actually just go ahead and do it, thanks!)

[linear]

FOL-652 Abnormal Text Selection Style on Share Page

[Innei]

I'm not very clear about what you mean, can you provide a screenshot?

[L33Z22L11]

[Innei]

can't reproduce.

[L33Z22L11]

This reduces readability significantly and makes selected text difficult to distinguish in light color mode.

It can be reproduced in light color mode.

[Innei]

It works on my Windows 11 chrome 130.0.6723.92

[Innei]

light mode also can't reproduce

[Innei]

Can't reproduce both macOS and Windows. Closed this issue. If other users met this issue can re-open again.

[L33Z22L11]

light mode also can't reproduce

You may use Dark Reader Chrome extention. Don't use the light color utility of extentions. You should trun to Chrome settings to switch to light color mode.

[L33Z22L11]

Firefox is okay, but Edge (normal or edge://flags/#force-color-profile selected to sRGB) and Chrome canary didn't give background-color of ::selection.

[L33Z22L11]

• Microsoft Edge 130.0.2849.68 (Release) (64bit)
• Chrome 132.0.6820.0（Release）canary (64 bit)

In short, the usage of var(--tw-bg-opacity) from origin value var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity))) caused this. When var(--tw-bg-opacity) is replaced by a simple 1, it behaves normally.

[L33Z22L11]

It's related to tailwindlabs/tailwindcss#15000 and fixed.