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

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

症状

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

再現方法

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

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

回避策

1.タップ時につく枠をCSSで消す。

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

2.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

<その1>
skewを操作するkeyframeアニメーションは動かない

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

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

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

<その3>
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で5秒後に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

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

対象

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)

主な要因

  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以上は未確認。

  • 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)では発生してません。

主な症状

  • 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上のテキストフィールドやパスワードフィールドは、ネイティブ側で上書きされているタメです。

つまり錯覚でもなんでもなく、実際に2つテキストボックスがあると…。
体感ですが、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が2重に表示される

対象

  • iPhone4 iOS4(4.3.3)
  • SIRIUS α IS06(2.2.1)

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

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

1件のコメント

  1. Android, iOS のバージョンを記述すると将来価値が高まると思います。
    今のままでは再現条件がわからず将来検索に引っかかったときのノイズになってしまいます。
    もったいないとおもうのでコメントしました。

    Reply

Leave a Comment.