CODEWITHSUNDEEP
cssgoogle-chromemix-blend-mode
Tim van Daatselaar
Tim van Daatselaar

Reputation: 154

Mix blend mode transition bug on Chrome

Chrome seems to have a weird bug on animating/transitioning mix-blend-mode within elements with border-radius. The blend mode gets removed on translating. How to fix?

Hover on the yellow overlay in chrome version 76.

div {
  border-radius: 50px;
  overflow:hidden;
  position: relative;
  width: 500px; height: 500px; background-color: red;
  overflow:hidden;
  background: #CC2233 url('https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') no-repeat;
}

span {
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
  display:block;
  width: 500px;
  height:331px;
  border-radius: 80px; display: block; mix-blend-mode: multiply;
  transform:translateX(-50%);
}

span:hover {
  transform: translateX(200px);
  transition: all .3s ease;
}
<div>
  <span></span>
</div>

Upvotes: 1

Views: 1360

Answers (1)

Ramon
Ramon

Reputation: 1465

This is not an issue with your code, but most likely an issue with your browser settings since the code works flawlessly in Safari and Firefox. I can reproduce the issue when I switch the settings on my end.

To solve this issue:

  • Navigate to chrome://flags
  • Make sure you have "Experimental Web Platform features" disabled

I guess this is why they call these features experimental ;)

Upvotes: 1

Related Questions