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).
Technical Documentation Template project board automation moved this from Review to Reviewer approved Sep 29, 2021
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!

@lfdebrux lfdebrux merged commit 58dc2fc into master Sep 29, 2021
@lfdebrux lfdebrux deleted the ldeb-fix-hcm-search branch September 29, 2021 09:46
Technical Documentation Template project board automation moved this from Reviewer approved to Done Sep 29, 2021
This was referenced Sep 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

None yet

3 participants