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

you have discovered a Chrome bug. It's working fine on Firefox and it should be the case on Chrome too — Temani Afif, Aug 30 '19 at 10:27
.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 — G-Cyrillus, Aug 30 '19 at 13:23

score 7 · Answer 1 · answered Mar 24 '20 at 13:50

7

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>

answered Mar 24 '20 at 13:50

vals

61,425
11
89
138

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 – Temani Afif Mar 24 '20 at 23:09
I had find also translate(0px), but the others are more "unexpected". Nice find ! @TemaniAfif – vals Mar 25 '20 at 06:21

score 4 · Answer 2 · 2020-03-29T17:37:21.200

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>

score 0 · Answer 3 · answered Mar 25 '20 at 17:01

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>

conflict between mix-blend mode and animation

3 Answers3