html - 異なる z-index を持つネストされたコンポーネントで mix-blend-mode を使用する

Question

ネストされた絶対位置の div を使用するセットアップがmix-blend-modeあり、div の要素を、その div よりも低い z-index を持つすべての要素とブレンドする必要があります。

問題は、各 div が独自の独立した z-index を持つ必要があることです(これはアクセシビリティ上の理由から変更できません)。

これは例で説明するのが簡単です:

#layer-1 {
  width: 700px;
  height: 700px;
  position: absolute;
  background-color: maroon;
  z-index: 1;
}

#layer-2 {
  position: absolute;
  height: 100px;
  width: 200px;
  z-index: 2;
}

#layer-3 {
  position: absolute;
  z-index: 3;
  mix-blend-mode: darken;
}

#layer-3 img {
  width: 300px;
}

<div id="layer-1"></div>

<div id="layer-2">

  <div id="layer-3">
    <img src="https://i.picsum.photos/id/100/2500/1656.jpg" />
  </div>

</div>

layer-3とブレンドするには の中にある画像が必要layer-1です。フィドルから z-index を削除するlayer-2と、ブレンディングが適切に機能することがわかります。ただし、前述のように、アクセシビリティ上の理由から、これはオプションではありません。

ここで jsfiddle を作成しました: https://jsfiddle.net/gabranches/v6cuL2o4/44/

これを回避する方法はありますか、それとも単なる制限mix-blend-modeですか?