iOS15で画面下部に固定のナビゲーション「タブバー」が配置されるらしい
ブラウザで開いているタブを保存できて、iPhone、iPad、Macのどれからでもアクセスできるようになるとのことだが、ほとんどのサイトでこの位置にCTAがあるためちょっと話題になっている
PSA for fellow internet makers – iOS 15 update to tabs on mobile safari makes me nervous, for designs with elements 'fixed' flush to the bottom of the viewport its unclear if it'll act janky, break, or just look plain ugly (a lot of ecom sites use sticky CTA buttons here too!). pic.twitter.com/cJPt9JJMrD
— David McGillivray (@dmcgco) 2021年6月7日
回避策として、padding-bottom: env(safe-area-inset-bottom)を使うとよいという話がある
Seems like it’s possible mitigate the issue by using “padding-bottom: env(safe-area-inset-bottom)” on any sticky elements, but the jankyness still prevails. pic.twitter.com/jGu00uscz4
— Joris Rigerl (@jrigerl) 2021年6月7日
env() は CSS の関数で、ユーザーエージェントが定義した環境変数の値を、 var 関数やカスタムプロパティと同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。
env() - CSS: カスケーディングスタイルシート | MDN
これはiPhoneXがでたときのSafeAreaの対応がキーになりそう
