お世話になります。
テーマdawnを使用しており追従するヘッダーメニューの文字やカートなどのアイコンを背景色によって変更させたいです。
単純にCSSの編集でmix-blend-modeを加えてもだめで色々試したのですが機能させることができません。
ご教示いただけますと幸いです。
Topic summary
Dawnテーマの固定ヘッダーメニューにmix-blend-modeを適用しようとしたが、通常の方法では機能しなかった問題について議論されています。
原因の特定:
div.section-headerにdisplay: sticky;が設定されているため、独立したスタックコンテキストが形成されているmix-blend-modeが有効になるには、ブレンドされる要素同士が同じスタックコンテキストに属している必要がある
提案された解決策:
div.section-header自体にmix-blend-modeを設定するposition: stickyを別の方法に変更して固定ヘッダーを再実装する
最終的な解決:
質問者はsection-headerにmix-blend-modeを追加することで機能させることに成功。ドロワーメニューの背景に影響が出たため、menu-openをnotにすることで対処し、現在様子見中。
@EBISAN 様
Dawnのヘッダーメニューにてmix-blend-modeが効かない件ですが、
私も試してみましたが、mix-blend-modeが効きませんでした。
htmlの構造を全て確認したわけではございませんが、
mix-blend-modeが有効になるためには、ブレンドされる要素同士が同じスタックコンテキストに属している必要があるため、
Dawnテーマでは効かない可能性が高いです。
明確な回答とならず恐縮です。
（キュー小坂）
少し興味があり調べてみましたが、Qcoltdさんの回答であっていると思います。
固定ヘッダーの親となるdiv.section-header に display:sticky; が設定されているために独立したコンテキストとなっています。
そのためmix-blend-modeを使いたい場合は以下のいずれかになるのではと思いますが、別の問題が発生する可能性もありますので要調査かと思います。
- div.section-headerにmix-blend-modeを設定する
- div.section-headerに設定されたpositionをstickyとfixed以外にして固定ヘッダーを実現する形に作り変える
参考:
https://standard.shiftbrain.com/blog/mix-blend-mode-and-stacking-context
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode
以上ですが、もしも記載内容が間違って間違っていましたら申し訳ありません。
皆様ご回答ありがとうございます。
しばらくログインしていなかったためご回答に気が付かず返信が遅く申し訳ございませんでした。
section-headerにmix-blend-modeを加えることで機能させることができました。
このままですとドロワーメニューを開いた際のbackgroundにも影響が出てしまったので、menu-openをnotにすることで解決できたように思います。
他に不具合が出てしまった感じはなさそうですのでこれで様子を見てみようと思います。
また何かありましたらよろしくお願いいたします。
}