向父级添加变换会破坏混合混合模式

Question

我正在网站上工作，我需要为移动到兄弟姐妹上的 div 制作动画并应用mix-blend-mode. 我正在使用一个库，该库创建 2 个 div 来包裹混合元素。该库还向直接父级添加了变换，这现在打破了混合。我认为这可能与堆叠问题有关，但无论添加多少/在哪里添加，transform3d(0,0,0 )混合仍然会损坏。

由于库的限制，我无法对包装器做太多事情，或者背景是最外层包装器的同级。

如果您切换 requiredParent2 转换，则一切正常（如上所述，此转换是由必需的库添加的）。

此外，混合元素还有兄弟元素（mixBorder，这阻止我将混合移动到requiredParents ）

小提琴也在这里： https: //jsfiddle.net/hb7qaod6/5/

.bg,
.root,
.requiredParent1,
.requiredParent2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}


.requiredParent2 {
  transform: translate3d(0px, 2px, 0px);

}

.bg {
  background-color: red;

}


.mix,
.mixBorder {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25%;
  height: 25%;

}

.mix {
  background-color: white;

  mix-blend-mode: difference;

}

.mixBorder {
  outline: white solid thick;
}

<div class="root">
  <div class="bg"></div>
  <div class="requiredParent1">
    <div class="requiredParent2">
      <div class="mix">
      </div>
      <div class="mixBorder">
      </div>
    </div>
  </div>