<ion-content>の内と外
IonicにはToastなどのオーバーレイコンテンツが用意されていますが、それでもやっぱり通知とか、時にはボタンとか（検索画面で見かけますね）、固定位置で置きたい時があります。
この画面だと、下部にある「たまごが孵りそう！」という通知です。
（以前作ったサギ科SNSのアレンジです。内容については深く考えないでください）
position: fixed;で画面下部に固定してあります。こういう動きをしてほしい。
<ion-content>の外に要素がある時は問題ないのです。
<ion-content>の内に要素を置くと…
ギャアア——————————！！！ スクロールした——————！
ionic-cli4からコンテンツ領域のCSSが変わった？
ionic-cliをバージョンアップする前（ionic-cli3の時）はposition: fixed;の要素が<ion-content>の内側にあっても固定されていました。というか、外側だと位置やmarginの指定が難しく、<ion-content>内に入れて何とかすることが多かったのです。
<ion-content>の中に生成される<div class=”scroll-content”>に見慣れないスタイルがありました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.scroll-content { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; display: block; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; will-change: scroll-position; contain: size style layout; //←これ } |
CSS Containmentというらしいです。
詳しい解説はこのへんとかこのへんとか。
このcontain: layoutによって固定要素のpositionが1つ上の要素に封じ込められてるようです。
|
1 2 3 4 5 6 |
<page-home> // ページ全体 ...ヘッダー... <ion-content> // コンテンツエリア height:100% <div class="scroll-content"> // ion-contentの中のボックス overflow-y:scroll ...オーバーレイコンテンツ... <div style="position: fixed"> // .scroll-contentの画面に対してfixed |
以前は.scroll-contentのpositionを無視して<ion-content>に対して配置されていたわけで、.scroll-contentの画面に対してfixedなのは正しい動きなのです……。
ちなみにCSS ContainmentはChrome52から適用されていましたが、先日アップデートされたChrome70からAndroidでも適用されました。
Can I Use… | CSS Containment
でももう<ion-content>内に置いちゃってるんですけど
CLIバージョンアップ前に<ion-content>内に固定要素を置きまくり、リリース直前にバージョンアップして「固定されてないよ！？ここ変更したら他にも影響出ちゃうんだけど！！」と叫びたくなる方もいるでしょう。私がそうです。HAHAHA。
原因は.scroll-contentのcontain: size style layout;なので、ここを上書きすれば何とかなります。
|
1 2 3 4 5 6 |
page-home { .scroll-content { contain: size style; /* または contain: none; */ } } |
containはうまく使えば便利そうですが、いつの間にか追加されてると困り者ですね…。
とりあえず応急措置の方法でした。
参考サイト
contain – CSS: Cascading Style Sheets | MDN
Can I Use… | CSS Containment
Chrome 52 に CSS Containment が導入 | Web | Google Developers
CSS Containment の制約と効能について覚え書き：：ハブろぐ
