Ionicでposition:fixedが効かなくなったら

<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 の制約と効能について覚え書き：：ハブろぐ