This bug report has been submitted to Microsoft. You can track it here.
To Microsoft staffs: the Issue section contains a summary of the issue and the Details section contains the environment specification as well as comprehensive reproduction steps.
Updated on 14 April 2017: The issue is confirmed but there is currently no timetable of getting it fixed. See the issue tracking link above for details.
Issue
Condition
- You use Microsoft Edge 14 or Internet Explorer 11.
- You are in High Contrast Black theme.
- You open the following document:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#container
{
-ms-high-contrast-adjust: none;
color: red;
background: green;
}
#link
{
-ms-high-contrast-adjust: none;
color: inherit;
}
#link:link
{
-ms-high-contrast-adjust: none;
color: inherit;
}
#link:visited
{
-ms-high-contrast-adjust: none;
color: inherit;
}
#link:hover
{
-ms-high-contrast-adjust: none;
color: inherit;
}
#link:active
{
-ms-high-contrast-adjust: none;
color: inherit;
}
</style>
</head>
<body>
<div id="container">
The <a href="" id="link">link</a> has incorrect colour under High Contrast Black theme in Microsoft Edge 14 and Internet Explorer 11.
</div>
</body>
</html>
Symptoms
The colour of the link is not red. It is yellow or green.
Expected behaviour
The colour of the link is inherit
, i.e., the colour of #container
, which is red
.
Details
Environment 1
Item | Value |
---|---|
Hardware | Surface Pro 3, 8GB, 256GB, Hong Kong |
Windows | Windows 10 64-bit, Version 1607, Build 14393.479 |
Edge | Microsoft Edge 38.14393.0.0 |
EdgeHTML | Microsoft EdgeHTML 14.14393 |
Language | en-US |
Environment 2
Item | Value |
---|---|
Hardware | Lumia 950 XL Dual SIM, People’s Republic of China |
Windows | Windows 10 Mobile, Version 1607, Build 10.0.14393.953 |
Edge | Microsoft Edge 38.14393.953.0 |
EdgeHTML | Microsoft EdgeHTML 14.14393 |
Language | en-US |
Environment 3
Item | Value |
---|---|
Hardware | Surface Pro 3, 8GB, 256GB, Hong Kong |
Windows | Windows 10 64-bit, Version 1607, Build 14393.479 |
Browser | Internet Explorer 11.953.14393.0, Update 11.0.40 (KB4012204) |
Language | en-US |
Reproduction
- Set set the theme to High Contrast Black:
- In environment 1 or 3, press Windows+S, and type Change the theme, then press Enter, and finally choose High Contrast Black under High Contrast Themes section.
- In environment 2, open Settings app, and tap Ease of Access, then tap High contrast, turn on High Contrast, and if the background is white, tap Color settings and choose Dark.
- Open the corresponding browser.
- Go to this JSFiddle.
- Observe the colour of the link in the lower-right frame. The colour is either yellow or green, but not red.
Screenshot
The following screenshot gives the rendering of the aforementioned link in High Contrast Black theme, High Contrast White theme, High Contrast #1 theme or High Contrast #2 theme, depending on the current theme of the system.
Notes
I find it really annoying that High Contrast schemes apply to @media print
, especially if it is High Contrast Black. Colours of High Contrast Black are designed to contrast against a black background, while most of the time, printing a document forces it to have white background. Microsoft should consider removing all High Contrast effects from @media print
. Currently I try using @media print { * { -ms-high-contrast-adjust: none !important; } }
to improve printing experience under High Contrast theme, which gives little good.
Please enable JavaScript to view the comments powered by Disqus.