スタックコンテキストとは？

スタックコンテキストとは、Webページ上で特定の条件を満たした要素によってZ軸に形成される階層構造のことです。

mix-blend-modeの仕様

mix-blend-modeでは、ブレンドされる要素同士が同じスタックコンテキストに属している必要があります。

同じスタックコンテキストに属するってどうゆうこと？

言葉だけだと理解しにくいと思います。
図を含めて解説しましょう。

まず、うまくいっている例から
以下のデモでは.wrapper要素 > .inner要素 > .box要素の順で親子の関係になっています。

.wrapper要素の背景画像を設定して、.box要素とブレンドさせたい時は.box要素にmix-blend-modeを指定すればうまくいきます。
なぜなら同じスタックコンテキストに属しているからです。

一方でうまくいかない例がこちら
以下のデモは先程のデモと同様の構造で.inner要素にtransform: skew(10deg);を指定しています。

この場合は、.box要素にmix-blend-modeを指定してもうまくいきません。
なぜなら、.inner要素がスタックコンテキストを形成して.wrapper要素と.box要素は同じスタックコンテキストに属していないからです。

transformにnone以外を指定するとスタックコンテキストが形成されます。
他にもスタックコンテキストを形成するCSSプロパティがあります。

transform: translate(-50%,-50%);を使いたい

positionで要素を中央に配置したい時にtransform: translate(-50%,-50%);を活用するかたは多いと思います。
しかし、そのせいでmix-blend-modeがうまくいかない場合は他の方法で中央に配置するようにしましょう。
実はpositionとmargin: auto;でも要素を中央に配置することができるので試してみてください。

positionとmargin: auto;を使って要素を中央に配置する方法は以下の記事で解説しています。

translateを使わずにpositionで要素を中央寄せにする方法

上下中央寄せはpositionのtop,bottom,left,rightの値を0にしてmargin: auto;を指定してあげればOKです。mix-blend-modeを使った要素にtransform: none;以外を指定するとスタックコンテキストというのが形成されうまく適応されなくなることがあります。