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;
}
