Dark mode code block ("CodeMirror") sections display a mysterious white square

[bbaustin]

Description

When looking at the interactive code block (maybe called "CodeMirror") sections in dark mode, there is a white square that doesn't seem to do anything. I could see this on Chrome, Firefox, and Safari.

Steps to Reproduce

1. Go to a page with an interactive code block (e.g., https://graphql.org/learn/queries/)
2. You may see something like this:

Expected Result

I would expect not to see the white square.

Actual Result

...I saw the white square.

Additional Context

There's a small chunk of CSS that sets this white square to be white:

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

On light mode, this makes the square invisible (because the background is also white). However, this CSS doesn't seem to account for dark mode.

My proposed fix is a little lazy. I'll just make the square invisible on dark mode:

.CodeMirror-scrollbar-filler:is(html[class~=dark] *) ,
.CodeMirror-gutter-filler:is(html[class~=dark] *)  {
  background-color: transparent; /* The little square between H and V scrollbars */
}

I think that a larger fix might be ideal in the future, because the scrollbars are invisible anyway, so this square doesn't seem to have any use (see: #1617). But maybe my proposed fix is OK in the meantime.

[saihaj]

I don't see this issue. Could have been resolved part of any of our other changes. If you can reproduce it can you share what browser then we can reopen it?

[bbaustin]

Hello @saihaj Sorry for the slow reply! Hmm, I'm still seeing it. I am using Chrome Version 131.0.6778.205 (Official Build) (arm64)

[benjie]

Hi @bbaustin please can you provide more details: exactly what browser versions and operating system are you using? Have you tried incognito/private window with all extensions disabled?

I see no such issue on Version 131.0.6778.139 (Official Build) (64-bit) in Ubuntu 24.04.1.