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が2重に表示される
【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
【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)
主な要因
- @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上のテキストフィールドやパスワードフィールドは、ネイティブ側で上書きされているタメです。
つまり錯覚でもなんでもなく、実際に2つテキストボックスがあると…。
体感ですが、position:absoluteされていると発生確率が上がる気がします。
回避策
Sencha Touch + PhoneGapでAndroid2.1でのフォームがずれる/残るバグの対処法 より
Java側でメソッド(webView.removeAllViewsInLayoutメソッド)を作成して、JavaScriptからはPhoneGap経由でネイティブのメソッドをコールすることで、ChildViewをクリアして、HTMLの上に表示される別の入力フィールドを取り除きます。
WebViewでラップしてないブラウザではどうにもならないっていうことですね…。
【css】 transitionでscaleを使用すると実行前のサイズに戻る(Android)
質問者さんは日本の方のようですが、根本的な解決策は見つかってない模様…。
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;
Android, iOS のバージョンを記述すると将来価値が高まると思います。
今のままでは再現条件がわからず将来検索に引っかかったときのノイズになってしまいます。
もったいないとおもうのでコメントしました。