みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

Android で position: fixed; と margin: auto; をつかうとレンダリング結果がずれることがある

結論から言うと、Android で position: fixed の要素をセンタリングしたいときは

.centering {
  position: fixed;
  left : 0; right: 0;
  margin: auto;
}

という感じではなく、

.centering {
  position: fixed;
  left : 50%;
  margin-left; -width / 2px;
}

みたいな感じで設定しましょう。
理由はこれから説明します。




CSSで左右中央揃えのテクニックはいくつかあります。

1. 対象の display を block にして margin を auto に設定する(widthが設定されている必要あり)

position が static 、 relative の場合は基本的にはこれでOKです。
absolute 、 fixed の場合は 4 を使いましょう。

2. 対象要素の display を inline-block にして親の text-align を center にする

対象の幅が決まってなくてもつかえるのがポイントです。

3. 対象要素の position を absolute に、 left を 50% にしたうえで margin-left を - width / 2 に設定する

対象のサイズが変更になった際に、width と margin-left を変更する必要があるため、個人的にはあんまり好きじゃないです。

4. 対象要素の position を absolute に、 left を 0 、 right を 0 にしたうえで margin を auto に設定する(widthが設定されている必要あり)

top: 0; bottom: 0; も追加すれば縦位置もセンタリングされるのがポイントです。


どれもこれも代表的なものばかりなので改めて解説するほどのことでもないのですが、Android にて position: fixed と組み合わせてつかう際には注意が必要です。

2 の position を fixed にした場合

一部Androidでセンタリングされず左端に表示されます。対象にクリックイベントを降っていた場合、クリックイベントも左端に移動します。あたりまえですが。
まあ、PCでもセンタリングされてないですしつかいみちがないのかもしれません。

3 の position を fixed にした場合

なにも問題なくうまくいきます。おすすめです。

4 の position を fixed にした場合

PC や iPhone でうまくいくので油断しがちですが、一番極悪です。
一部 Android で 左端に表示されるにもかかわらず、イベントの当たり判定だけはセンターに残ります。かんべんして欲しいです。