ARTICLE AD BOX
I'm running into an unusual issue. I have my menu in white, in mix-blend-mode difference which is working fine on the whole website, but if I scroll up top fast, the "html" appears and the effect doesn't work on top of it. Usually it's white so it looks like the type disappears but I've put it in red here to illustrate it. Has anyone ever encountered this issue ?
Neither the body / html has particular classes/properties. i've tried setting them both to position relative, z-index makes the effect disappear altogether if the menu isn't on top of a particular div.
Thank you
Here is a reproduction of the issue: https://codepen.io/editor/ifeltblankk/pen/019dbf17-3c79-7059-90e5-19d6f406dbc4
html{
background-color:red;
}
body{
background-color:lightblue;
height:175vh;
margin:0;
padding:0;
}
#menu{
mix-blend-mode:difference;
color:white;
font-family:sans-serif;
font-size:30pt;
position:fixed;
top:10px;
left:10px;
}
#menu.not-difference{
left:250px;
mix-blend-mode:normal;
color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pen</title>
</head>
<body>
<script src="./script.js"></script>
<div id="menu">
MENU LINK
</div>
<div id="menu" class="not-difference">
MENU LINK
</div>
</body>
</html>
3705 silver badges21 bronze badges
9
