Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix mark styles in Windows High Contrast Mode #265

Merged
merged 1 commit into from
Sep 29, 2021
Merged

Conversation

lfdebrux
Copy link
Member

@lfdebrux lfdebrux commented Sep 24, 2021

In some browsers (IE11, Chromium-based browsers) the marked text in search results are unreadable with forced colour modes when the background is black because the text colour for <mark> elements is set to black. This is especially present in Windows High Contrast Mode (HCM).

This commit fixes this by re-asserting that the marked text should be the same colour as the surrounding text.

We also have to set background-color: Canvas, because in Firefox background-color: transparent is also ignored (unlike in IE11, Chromiums).

Screenshots

Before After
Edge mark--before--edge mark--after--edge
Edge, HCM mark--before--edge-hcm mark--after--edge-hcm
IE11, HCM mark--before--ie11-hcm mark--after--ie11-hcm
Firefox, HCM mark--before--firefox-hcm mark--after--firefox-hcm

In some browsers (IE11, Chromium-based browsers) the marked text in
search results are unreadable with forced colour modes when the
background is black because the text colour for `<mark>` elements is
set to black.

This commit fixes this by re-asserting that the marked text should
be the same colour as the surrounding text.

We also have to set `background-color: Canvas`, because in Firefox
`background-color: transparent` is also ignored (unlike in IE11,
Chromiums).
Copy link
Contributor

@m-green m-green left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants