Home

mix-blend-mode on body is buggy on Chrome

On Chrome (currently V74) I had a problem applying elements with CSS filter mix-blend-mode: multiply. I just didn't work for my background typo on the start page of my recently designed blog.

TIL //

The wood texture was applied as background for the body element. Turns out, Chrome isn't able to filter on images of the body element. I needed to apply the background image to another wrapper and it worked.

So instead of having my element directly on the body with style like:

<body>
  <h1 class="my-blended-element">Hello World</h1>
</body>
body {
  background: url(myimage) repeat;
}
.my-blended-element {
  mix-blend-mode: multiply;
}

I had to change the markup to something like

<body>
  <div class="wrapper">
    <h1 class="my-blended-element">Hello World</h1>
  </div>
</body>

and apply the image to the wrapper.

html,body {
  height: 100%;
}
.wrapper {
  background: url(myimage) repeat;
  width: 100%;
  height: 100%;
}
.my-blended-element {
  mix-blend-mode: multiply;
}

Found on Stack Overflow