On Windows, with Chrome, I try to use backdrop-filter: blur
and mix-blend-mode: soft-light
, but every time my cursor moves on the Chrome Tabs, rectangle glitches occur at the top of the page.
I don't know how to fix it...
body {
margin: 0;
padding: 0;
}
.background {
background-color: #0000ff;
}
.blur-leftside {
width: 50vw;
height: 100vh;
backdrop-filter: blur(15px);
mix-blend-mode: soft-light;
background: #ffffff;
}
<html>
<body>
<div class="background">
<div class="blur-leftside"></div>
</div>
</body>
</html>