[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)

Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！

特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。

この記事はiOS5、Android 3以前について記載したものです

【css】タップ時にz-indexを無視して下の要素に枠がつく(Android)
【html, css】マルチバイト文字にfont-weight:boldが効かない(Android)
【css】 border-radiusのコーナーがジャギる(Android)
【css】 box-shadow、text-shadowでblurを0にすると描画されない(Android)
【css】　@keyframeアニメーションに関する不具合(Android)
【css】 @keyframeの100%で指定したスタイルが維持されない(Android, iOS3.*)
【css】アニメーション開始時・終了時に一瞬だけアニメーションしている要素が消える(Android)
【css】 rgbaアニメーションで残像が発生する(Android)
【css】 transrateを使用したアニメーションがちらつく(Android, iPhone)
【css】アニメーション開始時に関係ないところが点滅するようにちらつく(Android、iPhone)
【html, css】 JSやCSSで出力したマルチバイト文字が文字化けする(Android)
【html】ソフトウェアキーボードやブラウザメニューを表示するとbodyのheightが削られたまま戻らない(Android)
【html, css】テキストボックスに関するバグ(Android)
【css】 transitionでscaleを使用すると実行前のサイズに戻る(Android)
【css】対応していないCSS3 Animationの指定をすると誤動作する（Android 2.2）
【css】 background-imageが２重に表示される

【css】タップ時にz-indexを無視して下の要素に枠がつく(Android)

知らないと自分の組み方が悪いと思ってしまうバグ。これはハマる。

対象

Android OS 3以下全てのバージョン
Webkitブラウザ

[6721] WebKit browser: Input elements disregard z-index and erroneously steal focus

Weird behaviour in Android browser when selecting fields

症状

下にある<a>や<input>がタップに反応する
z-index指定が効かない

再現方法

子に<a>や<input>を入れた要素を２つ用意する（A、Bとする）
Bの要素をposition:absoluteとz-indexを使用してAに重ねる
Bにある<a>や<input>をタップする

スマホサイトは（jQuery Mobileとかtitaniumみたいなフレームワーク使ってたりすると特に）
position:absoluteを多用すると思うが、z-indexでページや要素の重なり順を指定しても
Androidでこのバグを持つブラウザだと、下にあるaやinput要素が反応してタップの枠がついてしまう。
反応するだけで実行はされないのが幸いか。

回避策

１．タップ時につく枠をCSSで消す。

body  {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

２．JavaScript等で上に何か重なったら下の要素を非表示にする。

【html, css】マルチバイト文字にfont-weight:boldが効かない(Android)

strongやemといったブラウザのデフォルトスタイルで太字にされるタグも効果なし。
英数だけ太字になる。

font-weight:bold fix test – jsdo.it – share JavaScript, HTML5 and CSS

直接見る

対象

Android OS 3以下全てのバージョン
Webkitブラウザ

回避策

1. :before, :after疑似要素で同じ文字列を重ねる

.bold:before {
    position:absolute;
    top:0;
    left:1px;
    content:attr(data-text);
}

2. text-shadowで太らせる
blurを0に出来ないのでボヤけた見た目になります。

3.　画像を使う

【css】 border-radiusのコーナーがジャギる(Android)

アンチエイリアス？何それおいしい？ってな状態に。

Android border-radius fix – jsdo.it – share JavaScript, HTML5 and CSS

直接見る

対象

Webkit のみ。
Firefox(gecko) とOperaMini(presto)はジャギらない。

3.x ?
2.3 ×
Xperia arc SO-01C(2.3.2)　Xperia acro SO-02C(2.3.3)
2.2 ×
SIRIUS α IS06(2.2.1) GALAXY S SC-02B(2.2)
2.1 ?
2.0 ?
1.6 ?

回避策

box-shadowでボカシをかけると多少ましになる。（ブラウザ判別 or bender prefix必須）
border-imageで角丸画像を指定する。

【css】 box-shadow、text-shadowでblurを0にすると描画されない(Android)

ボカシ無しのくっきりした影は作れない。

Android shadow bug – jsdo.it – share JavaScript, HTML5 and CSS

直接見る

対象

Webkit のみ。
Firefox(gecko) とOperaMini(presto)は描画される。

3.x ?
2.3 ×
Xperia arc SO-01C(2.3.2)　Xperia acro SO-02C(2.3.3)
2.2 ×
SIRIUS α IS06(2.2.1) GALAXY S SC-02B(2.2)
2.1 ?
2.0 ?
1.6 ?

回避策

beforeかafterの疑似要素を使って重ねる。
background-image またはborder-image

【css】　@keyframeアニメーションに関する不具合(Android)

keyframe animation and style change – jsdo.it – share JavaScript, HTML5 and CSS

＜その１＞
skewを操作するkeyframeアニメーションは動かない

.skewで100%時のスタイルを書いても書かなくても適用前の正方形になってしまう。

＜その２＞
@keyframesアニメーション中に
-webkit-animation-directionを変更しても切り替わらない

デモページにて、skew, scake, transition, rotateのボタンを押してから、
animation-directionのセレクトメニューを変更する。

＜その３＞
animation-direction: alternate;の @keyframesアニメーション再生中に
setIntervalを使用するとnormalっぽい動きに変わり、再生方向がnormalの逆になる。

デモページにて、
animation-directionのセレクトメニューからalternateを選び、
skew, scake, transition, rotateのボタンを押してから、
Opacity(timer), Color(timer) または　Timer(0)のチェックボックスを押す。

Opacity(timer), Color(timer)のラジオボタンをチェックすると、setIntervalによりdivのスタイルを変更。
Timer(0)をチェックすると、(0)の数値をsetIntervalにより100ms間隔でカウントアップして変更。
Timeout(5sec)をチェックするとsetTimeoutで５秒後にTimeoutの文字を緑色or黒に変更。

対象

Android 2.2～2.3のWebKit

2.3 ×
INFOVAR A01(2.3.3)
2.2 ×
SIRIUS α IS06(2.2.1)　Desire(2.2)
2.1　○
Lynx3D(2.1)　XPERIA SO-01B

※DesireとLynxは@cancer6さんより

【css】 @keyframeの100%で指定したスタイルが維持されない(Android, iOS3.*)

アニメーション開始時・終了時に一瞬前の状態に戻ってしまう現象の主たる原因。

Android & iOS3 @keyframe bug – jsdo.it – share JavaScript, HTML5 and CSS

テスト用デモはよくあるスライドアニメーションです。
表題のバグが発生すると、
イン時→アウトが一瞬見えるから白く点滅したように見える
アウト時→インが一瞬見えるから２回ひっこむように見える

対象

Android 2.3以外とiOS3
Webkitのみ

Android

3.0.1 × L-06C
2.3 ○
Xperia arc SO-01C(2.3.2)　Xperia acro SO-02C(2.3.3)
2.2 × fixed1 fixed2
SIRIUS α IS06(2.2.1) GALAXY S SC-02B(2.2)
2.1 ?
2.0 ?
1.6 △　なる時とならない時がある
Xperia SO-01B(1.6)

iPhone

iOS4 ○
iPhone4(iOS4.3.3)
iOS3 × fixed1
iPhone3G(iOS 3.1.3)

主な要因

@keyframe の 100%(to)で指定したスタイルが維持されない
display:none　の併用

回避策

animation-nameと一緒に100%時のスタイルも指定する。
display:noneのタイミングとズラす

jQTouchとかではwebkitAnimationEnd・webkitTransitionEndのトリガーイベントで
アウト状態になる要素のz-indexを最下位にして、
イン状態になった要素（またはその場に留まる要素）で一瞬見えるアウト状態の要素を隠している。
この方法は両方の要素がバグるともう手に負えないが、多少はマシになる。

-webkit-backface-visibility:hidden;とすると直る場合もある

余談

bind(‘webkitAnimationEnd,animationend’)とすると両方のtriggerが実行される。
userAgentで切り分けた方が無難。

【css】アニメーション開始時・終了時に一瞬だけアニメーションしている要素が消える(Android)

消えるんじゃなくてhtmlとbodyが上に被って消えているように見えていた。

対象

Android OS 2以下と3以上は未確認。

Xperia arc SO-01C(2.3.2)
SIRIUS α IS06(2.2.1)

主な要因

transformのバグ

回避策

transformを使わないアニメーションに変更する
（translateX　→　left　など）

-webkit-backface-visibility:hidden;を指定する
（別のバグを引き起こす可能性あり）

【css】　rgbaアニメーションで残像が発生する(Android)

CSS3 rgba animation test – jsdo.it – share JavaScript, HTML5 and CSS

直接見る

対象

Webkitのみ

3.x ?
2.3 ×
Xperia arc SO-01C(2.3.2)　Xperia acro SO-02C(2.3.3)
2.2 ×
SIRIUS α IS06(2.2.1) GALAXY S SC-02B(2.2)
2.1 ?
2.0 ?
1.6 ?

症状

alpha(0)が薄いグレーになる

回避策

透明を使わず色指定にすると多少マシになる。

【css】 transrateを使用したアニメーションがちらつく(Android, iPhone)

対象

Android OS 2以下と3以上は未確認。

Android OS 2.*
iOS 3.* ～ 4.*

transrateX または transrateY を translate3d に変更すると治るかも。

【css】アニメーション開始時に関係ないところが点滅するようにちらつく(Android、iPhone)

対象

Android OS 2以下と3以上は未確認。

Android OS 2.*
iOS 3.* ～ 4.*

上のtransrate3dでも治らないちらつきがある場合、
そのちらつく要素で text-indent:-9999px してたら color:rgba(0,0,0,0)　に変更すると治るかも。

【html, css】JSやCSSで出力したマルチバイト文字が文字化けする(Android)

日本語文字列が全体的に残念な感じになる。

対象

SIRIUS(2.2) とXperia Arc(2.3)では発生してません。

REGZA IS04 (os2.1-update1/webkit)
Xperia SO-01B(os2.1/webkit)　→ こちらの記事から

主な症状

CSSのcontentで指定した文字列が化ける
JavaScriptで出力する文字列が化ける
console.logなどの文字列が化ける
なんでもないところでパースエラーが頻発する
CSSが効かなくなる

要因

Basic認証

回避策

Basic認証を外す
マルチバイト文字を使わない

【html】ソフトウェアキーボードやブラウザメニューを表示するとbodyのheightが削られたまま戻らない(Android)

対象

Android OS 2以下と3以上は未確認。

Xperia arc SO-01C(2.3.2)
SIRIUS α IS06(2.2.1)

主な症状

画面下半分が真っ白になる
html、bodyの高さそのものが変化している
JavaScriptで正常な高さを取得出来ない
リロードしても直らない

要因

特になし。OSレベルのバグ。

回避策

回避策無し。ブラウザかブラウザウィンドウを閉じてやり直さない限りは修正不可能。

【html, css】テキストボックスに関するバグ(Android)

テキストボックスにフォーカスをすると、全く同じ挙動をするテキストボックスが出現
複製されたテキストボックスは同じ挙動をする
display:none等で非表示にしても増えたテキストボックスが消えない
スライドアニメーション等でテキストボックスが遷移をしても増えたテキストボックスが残る

対象

全てのAndroid
OSレベルのバグらしい

視認済みデバイス

SIRIUS α IS06(2.2.1)

原因

Androidがフィールドの入力の際にinputフィールドとは別に入力フィールドが画面の上に表示して入力を実装していることのようです。
Android端末では、WebView上のテキストフィールドやパスワードフィールドは、ネイティブ側で上書きされているタメです。

つまり錯覚でもなんでもなく、実際に２つテキストボックスがあると…。
体感ですが、position:absoluteされていると発生確率が上がる気がします。

回避策

Sencha Touch + PhoneGapでAndroid2.1でのフォームがずれる/残るバグの対処法より

Java側でメソッド（webView.removeAllViewsInLayoutメソッド）を作成して、JavaScriptからはPhoneGap経由でネイティブのメソッドをコールすることで、ChildViewをクリアして、HTMLの上に表示される別の入力フィールドを取り除きます。

WebViewでラップしてないブラウザではどうにもならないっていうことですね…。

【css】 transitionでscaleを使用すると実行前のサイズに戻る(Android)

質問者さんは日本の方のようですが、根本的な解決策は見つかってない模様…。

[12451]Using css transitions in webkit clears scale() transforms on non-animated objects for the duration of the transition

CSS3 animation flicker on Android 2.2 (webkit-transform:translate(..) scale(..) at the same time)

【css】対応していないCSS3 Animationの指定をすると誤動作する（Android 2.2）

こちらを参照。

[スマートフォン] Android 2.2の不具合 – makogの日記

【css】 background-imageが２重に表示される

対象

iPhone4 iOS4(4.3.3)
SIRIUS α IS06(2.2.1)

background-imageにnoneを追加すれば消すことが出来る。

background-image:url('images/hoge.png'), none;

【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android)

対象

症状

再現方法

回避策

【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android)

対象

回避策

【css】 border-radiusのコーナーがジャギる(Android)

対象

回避策

【css】 box-shadow、text-shadowでblurを0にすると描画されない(Android)

対象

回避策

【css】 @keyframeアニメーションに関する不具合(Android)

対象

【css】 @keyframeの100%で指定したスタイルが維持されない(Android, iOS3.*)

対象

Android

iPhone

主な要因

回避策

余談

【css】アニメーション開始時・終了時に一瞬だけアニメーションしている要素が消える(Android)

対象

主な要因

回避策

【css】 rgbaアニメーションで残像が発生する(Android)

対象

症状

回避策

【css】 transrateを使用したアニメーションがちらつく(Android, iPhone)

対象

【css】 アニメーション開始時に関係ないところが点滅するようにちらつく(Android、iPhone)

対象

【html, css】JSやCSSで出力したマルチバイト文字が文字化けする(Android)

対象

主な症状

要因

回避策

【html】 ソフトウェアキーボードやブラウザメニューを表示するとbodyのheightが削られたまま戻らない(Android)

対象

主な症状

要因

回避策

【html, css】 テキストボックスに関するバグ(Android)

対象

視認済みデバイス

原因

回避策

【css】 transitionでscaleを使用すると実行前のサイズに戻る(Android)

【css】 対応していないCSS3 Animationの指定をすると誤動作する（Android 2.2）

【css】 background-imageが２重に表示される

対象

シェア

関連