Safari's native "find on page" feature on MacOS appears with white-on-white text

[williamcpierce]

Problem

When using the browser native find feature in Safari on MacOS on pages using mdBook, text in the search field appears white on a white background, making it hard to read.

Environment: Safari 16.3 (18614.4.6.1.5) MacOS Ventura 13.2 (22D49)

Example:

Same issue in light mode:

Displays correctly in Firefox (white on grey):

Expected behavior:

Steps

1. Using Safari on MacOS, navigate to https://rust-lang.github.io/mdBook/
2. Press CMD-F

Possible Solution(s)

No response

Notes

Potentially relevant link, assuming Apple uses uikit for Safari: https://developer.apple.com/documentation/uikit/uisearchbar/1624281-searchbarstyle

It is difficult to search for this issue, as most results are about searching the web using the address bar, not the "find on page" feature.

Version

Assuming the rust-lang.github.io/mdBook page is using the current version of mdBook, the version is:
v0.4.25

[williamcpierce]

Deleting the entire head tag fixes the issue - I'm guessing this means it's probably a problem with one of the style sheets. I'll see if I can narrow it down.

[williamcpierce]

Deleting just the theme-color meta tag seems to fix the issue <meta name="theme-color" content="rgba(0, 0, 0, 0)"> Looks like this tag is set here: https://github.com/rust-lang/mdBook/blob/59bd5db55670a9b2e20daf2033f8ae52ce8206e3/src/theme/book.js#L349

After deleting the tag:

[williamcpierce]

Problem is likely due to Safari prohibiting certain theme colors - namely "traffic light" colors, but possibly also including #ffffff and perhaps rgba(0,0,0,0) as in this case: https://css-tricks.com/meta-theme-color-and-trickery/#aa-prohibited-colors

Changing the tag from <meta name="theme-color" content="rgba(0, 0, 0, 0)"> to <meta name="theme-color" content="rgba(0, 0, 0, 1)"> resolves the issue

Helpful site for testing theme-color https://roger.pub/theme-color-preview/