2014年 position: fixedの旅
もう少しなんとかならんのかねコレ。
個人のメモ的に書き残しておきますが、
再現する最小パターンを精査したわけではなく、
他のスタイルとの兼ね合いやらなんやらで発生してる可能性もあるので、そういう感じで見てください。
だがしかし
やつらは込み入ってくると事故ります・・ということで、最近遭遇した珍事件を以下に。
ページのunload時に要素が消える(~iOS7)
position: fixedになったせいでコンポジットされてしまったからか、
ページ遷移の間際に我先にといなくなります。
コレで何が困るかというと、いわゆるローディングの表示を出すレイヤーを手前に1枚置いてた場合、
最後の最後の肝心なところで下のコンテンツが見えちゃいます。
aタグ踏む前、フォーム送信する前に、fixedやめてbodyの高さ切ってーとかするっきゃない。
コンテンツのコンテナ消し去るってのもあながちアリかも。
top: 0が迷子になる(Android4.x)
- position: fixedな要素をdisplay:noneし
- ページをscrollToなどでスクロールし
- その後でさっきの要素をdisplay: blockにすると
なぜかtop: 0ではない中途半端な位置から描画されてしまうことがあります。
ちょっと画面さわったら戻ったりする。
なんでこんなことを・・と思いながら、
display: blockにするタイミングでtop: 0を上書き指定すると、元通りになります。
Viewportに対してfixed(iOS8~)
これ最近気付きました。
いや、元からそうなんですけど！そうなんですけど、違うんです！
伝えにくいこの感じ！
例えば。
iOS7までは、
- ページのてっぺんに固定ヘッダみたくfixedな要素を配置
- その状態で↓方向にスクロールして上の方を見ようとすると、
- アドレスバーとコンテンツの間がびよーんってなる
- fixedな要素もコンテンツの上辺にくっついたまま、びよーんって。
なってたんですけど、
iOS8からは、
- アドレスバーとコンテンツの間がびよーんってなる
- ただし、fixedな要素はブラウザのViewportに対してピタッとしたまま。
なのでfixedの要素の下敷きになってた部分が見えちゃうんですよねーーー。
元よりコレぞfixedって感じではある。
せやけど・・せやけどね・・。
なんで挙動違うのとか言われてもAppleのせいですとしか言えませんねん。
というわけで
2015年には幸せになりたいです。
また何か踏んだら追記しますよっと。
