Adding transform to parent breaks mix-blend-mode

I'm working on site where I need to animate divs that move over a sibling and apply a mix-blend-mode. I'm working with a library that create 2 divs the wrap around the blending element. The library also adds a transform to the direct parent, which is now breaking the blending. I figured this might relate to a stacking issue, but no matter how many/where I add a transform3d(0,0,0 ) the blend is still broken.

Due to the constraints of the library, I can't do much about of the wrappers or that the background is a sibling of the outermost wrapper.

If you toggle the requiredParent2 transform, everything works (as stated, this transform is added by a required library).

Additionally there are siblings to the blending element (mixBorder, which prevents me from moving the blending to the requiredParents)

Fiddle also here: 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>

Recommended topics

Hot tags