読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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

CSS Android

結論から言うと、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 で 左端に表示されるにもかかわらず、イベントの当たり判定だけはセンターに残ります。かんべんして欲しいです。