If you open the following example in a web browser, you may see a clear distinction between the html element and the overlying body element, despite the fact that they are assigned equal background colors with full opacity. Can somebody explain what is going on here and what the fix is?
If, for some reason, you cannot see a color difference, try adjusting the lightness of the color slightly up or down. 15% is where it is most obvious on my screen.
This side effect appears to only effect the Chrome browser on macOS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: hsl(0, 10%, 15%);
}
</style>
</head>
<body>
xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx
</body>
</html>
If you open the following example in a web browser, you may see a clear distinction between the html element and the overlying body element, despite the fact that they are assigned equal background colors with full opacity. Can somebody explain what is going on here and what the fix is?
If, for some reason, you cannot see a color difference, try adjusting the lightness of the color slightly up or down. 15% is where it is most obvious on my screen.
This side effect appears to only effect the Chrome browser on macOS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: hsl(0, 10%, 15%);
}
</style>
</head>
<body>
xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx
</body>
</html>- 2 Don't add noise to your question. If you want to "get off this place" do it without being rude. – Temani Afif Commented Mar 15 at 21:51
- 1 Nothing visible on my side (Win11, Chromium, Firefox). Interesting bug. You might want to report it. PS, would be nice (for posterity as well) if you could make a screenshot of the issue – Roko C. Buljan Commented Mar 15 at 23:25
- 1 @RokoC.Buljan added – ctrl freak Commented Mar 16 at 0:53
- 2 It's related to hardware acceleration. When I uncheck "Use graphics acceleration when available" I can't reproduce it. Perhaps it's some rounding HSL -> RGB discrepancy – Eric Fortis Commented Mar 16 at 4:22
- 1 @SergeyAKryukov: The question refers to a specific case, where the two backgrounds are not different. The code snippet shows a dark page, not a solid black one. Use a color picker tool on the first screenshot and/or boost its contrast to see the difference. – Ry- ♦ Commented Mar 16 at 4:42
2 Answers
Reset to default -1Apply CSS to Remove Margins and Set Height
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #1976d2;
}
Add box-sizing for Consistency
{
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #1976d2;
}