これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】

こんにちは！　フロントエンドエンジニアのせいとです。

先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。

とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’）

そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！

これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】

1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる

こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。
position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していたのですが、iOS8ではこれを反転させたときに重なり順がおかしくなることがありました。

解決方法

z-indexではなく、transformのtranslate3dで重なり順を設定する、というやり方で解決できました。
cssで書くとこんな感じです。

// 上に重ねたい要素
.hoge-up{
	-webkit-transform: translate3d(0, 0, 1px);
	transform: translate3d(0, 0, 1px);
	position: absolute;
}

// 下に重ねたい要素
.hoge-down {
	-webkit-transform: translate3d(0, 0, 0px);
	transform: translate3d(0, 0, 0px);
	position: absolute;
}

上に重ねたい要素のtranslate3dのzの値を、下に重ねたい要素のtranslate3dのzの値よりも高く設定してあげればOKです。

2. 要素が中央揃えにならない

こちらのページ（SP）では、右下の人アイコンをタップするとモーダルウィンドウが出てくるのですが、この中にあるSNSボタンのアイコンがなかなか中央揃えになりませんでした。

「heightとline-heightの値を同じに設定する」「display:table-cell、vertical-allign:middleを組み合わせる」といったよくある方法を試してみたのですが、どれもダメでした…。

解決方法

中央揃えにしたい要素にdisplay:inline-blockを設定することで解決できました。
cssで書くとこんな感じです。

// 中央揃えにしたい要素の親要素
.hoge-wrap{
	height: 50px; // 数字はいくつでもいいです。これは仮です
	line-height: 50px;
}

// 中央揃えにしたい要素
.hoge{
	display: inline-block;
}

ちなみにdisplay: inlineではだめでした。なぜに(- -；

3. Android OS4.2でテキスト要素の幅が勝手に変更され、backgroundプロパティも効かない

これはよくあるバグですね。LIGブログではトップページ(SP)の記事一覧などで使っている、記事要素のタイトルテキスト部分で発生しました。

テキストを囲っている要素にwidthを指定していない場合、幅が勝手に狭くなるという不具合です。

非レスポンシブサイトならwidthを固定で設定して解決なんですが、スマホはデバイスサイズがバラバラなので、固定させるわけにはいきません。

いつもならbackgroundに背景なり色なりを指定すれば解決できるバグで、以下の記事などで詳しく紹介されています。

• Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。 – Web雑記帳。

http://motoshige.net/blog/archives/5763

でも今回は、なぜかこれでも解決できなかったんですよね…。色を指定しても画像を指定してもダメでした。

解決方法

widthをJSで動的に設定することで対処しました。
サンプルはこんな感じです。

<div class="hoge">
    <div class="hoge-left">...</div>
    <div class="hoge-right">...</div> //　バグが起きた部分
</div>

function widthHack(){
	if (navigator.userAgent.indexOf('Android') > 0) { // OSがandroidかどうかを判定
		$('.hoge-right').css('width',$('.hoge').width() - $('.hoge-left').width()); //.hogeの幅から.hoge-leftの幅を引いた値を.hoge-rightのwidthに指定する
	}
}
widthHack();

// デバイスを傾けて画面幅が変わった際にも発動させる
$window.on('resize',function(){
	widthHack();
});

4. Webフォント化させたアイコンが一部Android 4系で表示されない

これは本当に参りました…。
LIGブログはアイコンを全てWebフォント化しているのですが、Androidの複数のデバイスで一部だけアイコンが表示されない不具合がありました。
一部だけっていうのが悩みどころで、かなりハマりました。

解決方法

該当部分はwebフォントを諦めて画像にしました(‘ー’)
あまりスマートなやり方ではないのですが、調べてもそれらしい情報が見つからず、原因解明に時間がかかりそうだったので手っ取り早い対処をしました。

まとめ

いかがでしたでしょうか。

これまでAndroidに悩まされることはあっても、iOSで悩むことはなかったので、今回はなかなか厄介な壁にぶつかりました…。

もしかしたらこれ以外にもiOS8特有のバグか仕様変更があるかもしれません。
みなさま、今一度ご自分のサイトを確認するといいかもしれません…|ーﾟ)

それでは。