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

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>