【CSS】Safariでmix-blend-modeがoverflow: hiddenによって効かなくなる場合の対処法

タイトル通りですが、mix-blend-modeをかけたい要素の親要素もしくは祖先要素にoverflow: hidden;が付いていると、特にSafariでmix-blend-modeが効かなくなるバグ(仕様？)があるようです。

対処法

mix-blend-modeをかけたい要素の親要素に transform: translate3d(0, 0, 0); を付けると改善する可能性があります。

.parent {
  overflow: hidden;
  transform: translate3d(0, 0, 0); // ←これを追記
}
.child {
  mix-blend-mode: multiply;
}

.ancestor {
  overflow: hidden;
}
.parent {
  transform: translate3d(0, 0, 0); // ←これを追記
}
.child {
  mix-blend-mode: multiply;
}

理由は不明ですが、overflow: hidden;を付けた要素と同じスタックコンテキスト(レイヤー)にあるmix-blend-modeが効かなくなるようです。（スタックコンテキストの説明は割愛しますが）

translate3dを入れることにより明示的に親のスタックコンテキストに組み込まれ、かつハードウェアアクセラレーションが有効になることにより改善するのでは……？？という仮説を立てています。

解決方法があるとはいえ不便なことは確かなので、解消されることを願っております……。

WEB製作者、IEのサポート終了で苦しまなくなった代わりにSafariで苦しむことが増えてえーんってなりがち。

よろしければお試しください。

参考記事

Writerこの記事をかいたひと

みなせしゅん

ディレクター／エンジニア／デザイナー／

1994年生まれ、千葉県育ち。2019年より個人事業主として活動。
プランニングやディレクション、フロントエンドやバックエンドのコーディング・プログラミング、WEBデザインからグラフィックデザインまで、わりとなんでもやる人。