Text selection is not visible in GitHub website

[leodevbro]

Select Topic Area

Bug

Body

Firefox and Edge do not have this problem.

So, with Chrome, when I am trying to select a text, the text really gets selected but it is not visible, I mean the text background does not change (not for all texts. Text in some parts of GitHub website seems fine. Mostly repository code texts have this problem). Other websites seem fine. Only GitHub website behaves like this.

I think it's a bug of GitHub website, because the CSS style, which prevents changing text background, is coming from GitHub server.

Please see the video:
https://www.youtube.com/watch?v=HA1gmRHvbWs

[leodevbro]

Temporary solution is to run this code in the dev tools console window:

const addStyle = (styleString) => {
  const style = document.createElement('style');
  document.head.append(style);
  style.textContent = styleString;
};

addStyle(`
  body *::selection {
    background-color: rgb(50 80 90 / 0.5) !important;
  }
`);

Yeah, every time we refresh the page, we will have to run this code again. It's just a quick temporary solution.

[vanowm]

I'm experiencing the same issue with Edge 111.0.1661.44 (Official build) (64-bit), but no issue in Chrome 111.0.5563.65 (Official Build) (64-bit)
Switching to light theme in github profile also fixes the issue.

P.S.
text selection is not even visible in devtools for github only...

[vanowm]

In my case this was caused by enabled Experimental Web Platform features flag:
Chrome: chrome://flags/#enable-experimental-web-platform-features
Edge: edge://flags/#enable-experimental-web-platform-features

[horatiorosa]

good grief, this was plaguing me for a couple of weeks. Switching to light mode worked for a little while but this seems to be the right solution, buh bye experimental features.

[syt0r]

So this is bug in Chromium? I wonder why selection works on other websites with it enabled...

[Tatsh]

Is this reported to Chrome? This flag is always questionable and I wish they would split it into separate features.

[mvduin]

Is this reported to Chrome?

See my comment for more explanation and link to chrome bug:

[tobyhinloopen]

Such a weird bug. Thanks

[sanchezzzhak]

oh, how inconvenient it is not to be able to select text even in the editor.

[cbarney813]

Switching themes seems to help with the problem. Dark/light.

[sanchezzzhak]

the problem will be solved if the polyfile is removed from the text selection code
https://github.com/orgs/community/discussions/50432#discussion-4979747

[mvduin]

Very odd indeed, the "Experimental Web Platform features" flag makes all Chrome versions I've tested (v111…v114) unable to resolve CSS variable references in ::selection styling unless the variable is specifically declared for ::selection. See Chrome bug 1381380.

Disabling the flag as suggested by @vanowm is one obvious workaround, but if you want to keep that flag enabled you'll want to inject some custom CSS (e.g. using the "User JavaScript and CSS" extension or something similar). You can either override the selection color directly, e.g.

::selection {
   background-color: rgba(56,139,253,0.4) !important;
}

or perhaps more elegantly you can declare the relevant variable in a place where it can be found by the existing styling rules:

:root::selection {
   --color-accent-muted: rgba(56,139,253,0.4);
}

which avoids changing the scope(s) where this particular selection color is being applied by the theme. The variable name and value shown above are from the "Dark default" theme and may need to be tweaked if you're using a different theme that has the same problem.

[akaydev-coder]

awesome, thanks!

[klujanrosas]

Worked perfectly with Refined Github! 🥳

[bodik24ua]

I wrote that user script to resolve it: (help me publish it to all community, to resolve it nice for all)
use it in tampermonkey (or same on it) extensions

// @name         GitHub Selection Highlighter
// @namespace    yournamespace
// @version      1.0
// @description  Highlights selected text on GitHub with a custom background color
// @author       Your Name
// @match        https://github.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const addStyle = (styleString) => {
        const style = document.createElement('style');
        document.head.append(style);
        style.textContent = styleString;
    };

    addStyle(`
        body *::selection {
            background-color: rgb(96 255 0 / 35%) !important;
        }
    `);
})();

[andrewleech]

I wrote that user script to resolve it: (help me publish it to all community, to resolve it nice for all) use it in tampermonkey (or same on it) extensions

@bodik24ua Thanks for this copy-paste share - minor note it's missing the // ==UserScript== line at the top. Cheers!

... and I personally rather css colours based on @mvduin 's suggestions eg.

    addStyle(`
        body *::selection {
           --color-accent-muted: rgba(56,139,253,0.4);
        }
    `);

[mvduin]

I don't see why you'd use that selector instead of :root::selection.

even better would be to not hardcode any names or values but to copy all computed custom css properties on the :root (i.e. html) element to :root::selection

(or perhaps even scan document.styleSheets for relevant properties and copy these over to ::selection-qualified versions of the same rules, though that may be getting excessively complicated)

[leiless]

FYI, Missing the ==UserScript== header.

[excommunicado110]

GitHub doesn't give a shit what we are suffering from the enforce this new pathetic incomplete UI on us. I suggest you guys shift to GitLab they have much more professional behaviors than Github. Almost thousands of people and companies move their work onto Gitlab and it is proven bt Twitter's recent poll. Leave their site and raise your voice, don't use Github until they fixed what they messed up. Best of Luck guy!

[tobyhinloopen]

It think it's bad taste to comment to migrate to other software under a bug report. Are you switching software every time you encounter a bug? Do you write software void of any bugs?

This isn't Reddit.

[loughlincodes]

Just to note I have started experiencing this in Chrome and Brave as of 30 Nov 2023.

Chrome: Version 119.0.6045.199 (Official Build) (x86_64)
Brave: Version 1.60.110 Chromium: 119.0.6045.105 (Official Build) (x86_64)

In both browsers I have "experimental features" turned off:

Just noting it here as it's a bit of a pain as I liked resolving simple merge conflicts in the browser rather than on the command line or in my IDE.

[mvduin]

The CSS feature is probably no longer considered "experimental" and therefore no longer covered by that flag. At this point it will be up to github to just fix their broken CSS.

[leiless]

I've got the same issue, hope to fix this soon.