IonicにはToastなどのオーバーレイコンテンツが用意されていますが、それでもやっぱり通知とか、時にはボタンとか(検索画面で見かけますね)、固定位置で置きたい時があります。
この画面だと、下部にある「たまごが孵りそう!」という通知です。
(以前作ったサギ科SNSのアレンジです。内容については深く考えないでください)
position: fixed;
で画面下部に固定してあります。こういう動きをしてほしい。
<ion-content>の外に要素がある時は問題ないのです。
<ion-content>の内に要素を置くと…
ギャアア——————————!!! スクロールした——————!
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
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 の制約と効能について覚え書き::ハブろぐ