3

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...

enter image description here

  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>
Phoax
  • 169
  • 1
  • 2
  • 9

0 Answers0