QOXホームへ

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

Yuko Hashimoto

Yuko Hashimoto

Tags: ,

<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”>に見慣れないスタイルがありました。

CSS Containmentというらしいです。
詳しい解説はこのへんとかこのへんとか。
このcontain: layoutによって固定要素のpositionが1つ上の要素に封じ込められてるようです。

以前は.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-contentcontain: size style layout;なので、ここを上書きすれば何とかなります。

containはうまく使えば便利そうですが、いつの間にか追加されてると困り者ですね…。
とりあえず応急措置の方法でした。

参考サイト

contain – CSS: Cascading Style Sheets | MDN
Can I Use… | CSS Containment
Chrome 52 に CSS Containment が導入 | Web | Google Developers
CSS Containment の制約と効能について覚え書き::ハブろぐ

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up