Light/Dark Mode issues on older versions of Safari 12,13, and 14

[eonarheim]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Howdy! We are using docusaurus for the https://excaliburjs.com documentation site. Some of our users have reported issues with code snippets showing both the light and dark mode versions at the same time in older versions of safari. The docusaurus project is in the /site directory in the example link.

See issue excaliburjs/Excalibur#2981

With our investigation this seems to be because of the way that the :has pseudo class is used to show/hide the snippet. One possible fix is a simpler selector using backwards compatible css in docusaurus?

Reproducible demo

https://github.com/excaliburjs/Excalibur/tree/main/site

Steps to reproduce

1. Run the docusaurus site locally https://github.com/excaliburjs/Excalibur/tree/main/site with npm run start
2. On safari 12, 13, or 14 navigate to /docs/installation
3. Observe the duplicated snippets for both light and dark mode
   

Expected behavior

Either the light mode code snippet or the dark mode snippet should appear on older versions of safari (12, 13, 14)

Actual behavior

Both versions of the code snippet appear

Your environment

• Public source code: https://github.com/excaliburjs/Excalibur/tree/main/site wit
• Public site URL: https://excaliburjs.com
• Docusaurus version used: 3.0.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Safari 12, 13, 14 & Node v20.12.1
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

• I'd be willing to fix this bug myself.

[eonarheim]

Oh we also tried a :has polyfill excaliburjs/Excalibur#3019

[slorber]

Probably fixed in v3.1.1+ already, with #9530

Please upgrade your site before reporting bugs, or provide a runnable repro using the latest version. Otherwise, it's hard to inspect and we might spend time uselessly trying to fix a problem that is already fixed.

Note you choose to use Shiki Twoslash preset. It's not a plugin we maintain, we can only support you for code we maintain and it's possible that third-party packages have bugs too. Please provide a repro that only involves official packages.

[eonarheim]

I'll retest in that version to be sure