conflict between mix-blend mode and animation

Question

If you use animation effect before mix-blend-mode property you will not get mix blend mode.

Once you remove the animation class or disable animation, then mix-blend-mode will work.

What is the problem? I spent hours to solve just this simple thing. Please, help

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

<div class="animate">123</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

mix blend should take effect anyway

Dearden

you have discovered a Chrome bug. It's working fine on Firefox and it should be the case on Chrome too – Nielsen

I found this problem only on PC Windows platform – Dearden

How to report it to Chrome developers? – Dearden

bugs.chromium.org/p/chromium/issues/list – Nielsen

.box has a yellow background, and would need also mix-blend-mode. If you remove the image, you'll see that the rotating box is not seen through it. Your image is only mixing wit thé yellow background – Ingrid

Answer 1

In the old times, adding a transform translateZ(0px) used to solve a lot of problems.

At least in my Chrome, seems to still be the case:

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
  transform: translateZ(0px);  /* added */
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

<div class="animate">123</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

Heterogynous

Surprisingly, any property that create a stacking context will fix the issue like position: relative;z-index: 2; or translate(0px) or blur(0), etc – Nielsen

I had find also translate(0px), but the others are more "unexpected". Nice find ! @TemaniAfif – Heterogynous

Answer 2

Adding mix-blend-mode to the parent element also, solves the issue.

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
  mix-blend-mode:multiply;
}

.box img{ mix-blend-mode:multiply;}


.animate{  
  border:1px solid red;
  border-radius: 1rem;
  width:2rem; 
  height:2rem;
  animation: spin 2s infinite linear;
  display:flex;
  align-items: space-around;
  align-content: stretch;
  justify-content: space-around;
}


@keyframes spin {
  0% {  transform: rotate(0deg); background-color: aqua; }
  50% { background-color: yellow; }
  100% { transform: rotate(1turn); background-color: aqua; }
}

<div class="animate">•</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

Consort

Answer 3

In this problem, animate's stack order is between box and img because animate use keyframe.I think keyframe change animate's stack order.So,Img cannot blend in box.We can change element's stack order by using z-index. Solution is img must within box.We have two options.Results will be different where you use z-index.

First option, we can change animate's stack order in animate class. `

.animate{
  position:relative;
  z-index:2;
}

` Result - animate will be front of box with img.

Second option, we can change box's stack order in box class. `

.box{
  position:relative;
  z-index:2;
}

` Result - box with img will be front of animate.

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  position:relative;
  z-index:2;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

<div class="animate">123</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

Lilienthal