Why is text selection not visible in GitHub or other websites using the Google Chrome browser?

Question

Firefox and Edge do not have this problem.

When using Google Chrome browser, I am trying to select code or text. The text is selected, but it is not visible. The usual highlighting of the background is not visible. Most other websites seem fine. GitHub website behaves like this.

It appears as if it's a bug of the GitHub website, maybe because of the CSS styling, which prevents changing text background highlighting, is coming from GitHub server.

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

I also noticed this happening here in the code editor of Veutify Playground: https://play.vuetifyjs.com/

Shortchange

I have the same problem. I cannot see text highlight when I select some text on github.com. Even on textareas (when editing a comment or an issue) selected text is not highlighted. CTRL-C works as expected, just I don't see what text is selected so copying the right part of text is quite difficult. – Lobster

Answer 1

Using Google Chrome:

• Open chrome://flags

• Disable Experimental Web Platform features

• Relaunch the browser

If this doesn't work, open chrome://flags, but instead try Reset all button at the top.

Source: https://github.com/orgs/community/discussions/50295

Shortchange

I was having this issue with Edge. It seemed to affect copying text from the console too. It was specifically the Experimental Web Platform features flag that was causing it so no need to click Reset all if you have multiple flags you don't want to reset. – Makeyevka

Worked for me with brave - but also needed to restart the browser – Subatomic

It's Experimental Web Platform features for me. Saved my day, had this problem since months and forgot about my experimental flag. – Zitella

Answer 2

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.

Shortchange