WebTecNote

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

Tenderfeel

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

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

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

【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

症状

再現方法

スマホサイトは（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)はジャギらない。

回避策

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

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

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

直接見る

対象

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

回避策

【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

※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

iPhone

主な要因

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

回避策

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

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

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

余談

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

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

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

対象

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

主な要因

回避策

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

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

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

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

直接見る

対象

Webkitのみ

症状

回避策

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

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

対象

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

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

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

対象

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

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

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

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

対象

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

主な症状

要因

Basic認証

回避策

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

対象

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

主な症状

要因

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

回避策

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

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

対象

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

視認済みデバイス

原因

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が２重に表示される

対象

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

background-image:url('images/hoge.png'), none;
モバイルバージョンを終了