iterative / iterative/gatsby-theme-iterative

Invisible selection color in Safari 18.0

Open
#287 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
6
Forks
2
PR merge metrics
No merged PRs in 30d

Description

Description

Selection color in code blocks in Safari 18.0 is unreadable. It's actually there (at first I thought selection doesn't work at all, but no)

Image

In Chrome looks as expected:

Image

In both browsers there's correct color from here: https://github.com/iterative/gatsby-theme-iterative/blob/c8238fbeb3dd903de0e85094ad89dc78498ab36c/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/theme.module.css#L71-L74

I guess there's some special behavior in Safari, such as different color space or something?

Environment

OS: macOS 14.7 Sonoma
Safari: 18.0
Chrome: 134.0.6998.89

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/theme.module.css at lines 71-74 and reproduce text selection in Safari 18.0 on macOS 14.7, comparing it with Chrome. Investigate the existing selection color behavior; done means code-block selections are readable in Safari without regressing the expected Chrome appearance.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.