<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”>に見慣れないスタイルがありました。
.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つ上の要素に封じ込められてるようです。
<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;なので、ここを上書きすれば何とかなります。
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 の制約と効能について覚え書き：：ハブろぐ
