混合模式与动画之间的冲突

Question

如果在mix-blend-mode属性之前使用动画效果，则无法获得混合模式。

一旦您删除动画类或禁用动画，然后mix-blend-mode将起作用。

问题是什么？ 我花了几个小时来解决这个简单的事情。 请帮忙。

.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>

混合模式应该仍然生效。

- Vosidiy Muslimbek

---

你发现了一个Chrome的bug。在Firefox上它运行良好，而且在Chrome上也应该是这样的。 - Temani Afif

我只在PC Windows平台上发现了这个问题。 - Vosidiy Muslimbek

如何向 Chrome 开发者报告此问题？ - Vosidiy Muslimbek

https://bugs.chromium.org/p/chromium/issues/list - Temani Afif

.box 具有黄色背景，并且还需要混合模式。如果您删除图像，您会发现旋转的盒子并没有穿过它。您的图像仅与黄色背景混合。 - G-Cyrillus

Answer 1

在过去，添加transform translateZ(0px)通常可以解决很多问题。至少在我的Chrome浏览器中，这种方法仍然有效。

.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>

- vals

---

令人惊讶的是，任何创建堆叠上下文的属性都可以解决这个问题，例如 position: relative; z-index: 2; 或者 translate(0px) 或者 blur(0) 等。 - Temani Afif

我已经找到了translate(0px)，但其他的更加“意外”。不错的发现！@TemaniAfif - vals

Answer 2

将mix-blend-mode属性添加到父元素中也可以解决这个问题。

.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>

- user2560539

Answer 3

在这个问题中，animate的堆叠顺序在box和img之间，因为animate使用了关键帧。我认为关键帧改变了animate的堆叠顺序。所以，Img不能混合在box中。我们可以通过使用z-index来改变元素的堆叠顺序。

解决方案是img必须在box内部。我们有两个选项。在使用z-index时，结果会有所不同。

第一个选项是，在animate类中更改animate的堆叠顺序。`

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

结果 - 动画将在带有图像的盒子前面。

第二个选项，我们可以在盒子类中更改盒子的堆叠顺序。

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

结果 - 带有图像的框将在动画前面。

.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>

- NayDwe