Safari doesn't handle variable color in syntax highlight correctly?

[birdybro]

This is a report/discussion on behalf of a user @Toryalai1 of my documentation site found here --> https://mister-devel.github.io/MkDocs_MiSTer/

I've done some customization, but not anything that I would think would make any difference between Safari and Firefox/Chrome (which I've tested on both and it works fine).

MiSTer-devel/MkDocs_MiSTer#29 - This is the description of the issue. For some reason it's making the variable font black instead of the white I picked.

https://mister-devel.github.io/MkDocs_MiSTer/advanced/videoscaling/ - Example documentation page, it's happening in the syntax highlighted sections.

Seems like --md-code-hl-variable-color is just being ignored by iOS for some reason hrmmm

[squidfunk]

Thanks for reporting. If you can create a minimal reproducible example, and attach it here as a zip, I can look into it.

[birdybro]

https://mister-devel.github.io/MkDocs_MiSTer/advanced/videomodes/#additional-flags

I don't know what you mean specifically. I don't have the ability to reproduce it since I don't have iOS. I talked to another person who is a web dev and he said that iOS browsers all use webkit, and this user who had the issue also saw the problem in their chrome browser, so the bug is occurring due to webkit most likely.

I asked him to look at the material for mkdocs page and the same thing was not occurring, so my only guess is my custom colors are incorrect somehow :(

https://github.com/MiSTer-devel/MkDocs_MiSTer/blob/main/docs/stylesheets/extra.css

-md-code-hl-variable-color: var(--md-code-h1-generic-color);

That is the color in question, which is referencing this:

--md-code-hl-generic-color: #f8f8f28a;

[squidfunk]

I don't know what you mean specifically. I don't have the ability to reproduce it since I don't have iOS. I talked to another person who is a web dev and he said that iOS browsers all use webkit, and this user who had the issue also saw the problem in their chrome browser, so the bug is occurring due to webkit most likely.

I'm unable to reproduce it in Chrome.

[birdybro]

Interesting... so Chrome on iOS looked correct, but you could reproduce it in Safari on iOS?

[birdybro]

I get what you mean by a minimal example now, sorry, coffee just kicking in ;)

MkDocs_MiSTer.zip

[squidfunk]

Your example contains too many files. Please provide a minimal example which only showcases the issue but doesn't contain other plugin and extensions. You need to remove everything that is not related.

[birdybro]

Will do! I'll try and further reduce it. Sorry!

[birdybro]

MkDocs_MiSTer.zip

Is this sufficient?

[squidfunk]

Yes, thanks! Much better.

Looking at the CSS, I don't see any error on our side. In fact, you have not defined --md-code-hl-variable-color correctly – it points to an undefined variable called --md-code-h1-generic-color. I assume that you meant --md-code-hl-generic-color (l instead of 1). Changing the 1 to l makes it work:

[data-md-color-scheme="MiSTer-Dark"] {
  --md-code-hl-variable-color: var(--md-code-hl-generic-color);
}

Thus, it's a user error. Screenshot from Safari shows that it now works as expected:

[birdybro]

Thank you for catching that! I understand it much more clearly now. Thanks for correcting this nub mistake!