Mix-Blend-Mode Doesn't Work on Chrome

Mix-blend-mode not working on Chrome but works as expected in Firefox and Chrome

it's due to the use of the big negative z-index. Remove it and make sure you have positive z-index for element that need to be above it. Also make sure to set background to html and body.

body {
  height: 1000px;
  font-family: sans-serif;
  background:#fff;
}
html {
  background:#fff;
}

.wave {
  position: fixed;
  width: 100%;
}
.wave svg {
  width: 100%;
}

nav {
  position: relative;
  z-index: 1000;
  padding-top: 100px;
  mix-blend-mode: difference;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  max-width: 400px;
  width: 100%;
}
nav ul li {
  margin: 0 30px;
  font-weight: bold;
}
nav ul li a {
  z-index: 1;
  position: relative;
  color: tomato;
  text-decoration: none;
}
nav ul li a:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 0px;
  width: 0px;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.1);
  transition: 0.25s ease all;
}
nav ul li a:hover {
  color: #000;
}
nav ul li a:hover:before {
  height: 100px;
  width: 100px;
  background-color: tomato;
}

<div class="wave">
  <svg viewBox="0 0 414 124" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 87L9 74C17 62 35 37 52 27C69 17 86 21 104 27C121 33 138 41 155 37C173 33 190 17 207 27C224 37 242 54 259 54C276 54 293 37 311 27C328 17 345 33 362 54C380 74 397 99 405 112L414 124V0H405C397 0 380 0 362 0C345 0 328 0 311 0C293 0 276 0 259 0C242 0 224 0 207 0C190 0 173 0 155 0C138 0 121 0 104 0C86 0 69 0 52 0C35 0 17 0 9 0H0V87Z" fill="#FA8072"/>
  </svg>
</div>

<nav>
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">about</a></li>
    <li><a href="">contact</a></li>
  </ul>
</nav>

mix-blend-mode doesn't work on Chrome

Chrome has some problems with mix-blend-mode and body

use an intermediate div for the image

.base {  background: url("https://images.unsplash.com/photo-1530518854704-23de978d2915?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a5e654b18d678b37850cefea5872008&auto=format&fit=crop&w=2477&q=80")    no-repeat left / cover;}
h1 {  font-family: "Righteous", cursive;  mix-blend-mode: screen;  display: flex;  flex-flow: column;  padding: 0.5em;  margin: 0;  font-size: 6em;  line-height: 0.95;  background: white;  color: black;  text-transform: uppercase;  max-width: max-content;}

<div class="base"><h1>  <span>Simple</span>  <span>Cutout</span>  <span>Heading</span>  <span>Effect</span></h1></div>

mix-blend-mode: difference not working on Chrome

This should work, but you have to give a background color to the html. You missed that in the fiddle. Adding a background color to the html worked. Check the snippet.

You can also try the same in fiddle by giving background color to the html

html{  background:#fff;  margin:0;  padding:0;}body {   text-align: center;   font-family: Montserrat, sans-serif;   margin: 0;  height:100vh;  background: linear-gradient(90deg,#fff 50%,#000 50%);}h1 {  font-size: 10vw;  margin: 0;   color:#fff;  mix-blend-mode: exclusion;}

<h1>BAD BOY<h1>

mix-blend-mode not working in webkit-browsers when element is direct child of body

You are facing an issue related to background propogation since background applied to body has a special behavior

If you consider another container it will work fine:

div {  background-color: #fff;}
.volume-icon {  mix-blend-mode: difference;}

<div>  <img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'></div>

Blend mode in Chrome not applying properly

Probably it is a bug in Chrome

However, you can get this effect more easily, and it will work ok in both browsers

Use only 2 backgrounds, and create the spot with a gradient

.test {    background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"),           radial-gradient(circle at 250px 100px, transparent 50px, #606060 150px);    background-blend-mode: darken;  height: 400px;}

<div class="test"></div>

---

Related Topics