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

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>