[js,css] Android4.1 が返す element.style.cssText の値が他と違う件

style.cssTextにベンダープレフィックス付きプロパティをセットする検証コードをWebkit系ブラウザで見ると、
戻り値はセットした値と同じベンダープレフィックス付きプロパティになります。

var el = document.getElementById('helloWorld');
el.innerHTML = 'Hello, World!';

el.style.cssText = '-webkit-animation:hoge;';

document.write(el.style.cssText);


” Android4.1 が返す element.style.cssText の値が他と違う件” の続きを読む

[HTML] Android 4.0.x のselectタグにおけるdisabledの挙動がおかしい件

selectをdisabledにすると通常はタップやクリックしてもoptionが開かなくなります。
でもAndroid4.0.xだと選択できないピッカーが表示されます……

GALAXY S3

テストコードはこちら

Andoird2.3以下はピッカーが出ません。
どうしてこうなった……

ちなみに、[disabled]{pointer-events:none} かontouchstartにpreventDefaultしてあれば表示されません。

[CSS3] Androidのmask-imageに関する不具合について

CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。
その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、
参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。
でもよく調べてみたらそれだけじゃなかったんです。

“[CSS3] Androidのmask-imageに関する不具合について” の続きを読む

Android 4.* で 画像がぼやける不具合について

最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。

Android4.xで画像という画像がぼやけまくるという怪現象があり、
シンプルな例を書いてみたらtranslateZが1つの原因のようでした。

translateZが親に指定されているだけでbackgroundだろうがborderだろうが画像が全部ぼやける。
空要素にbackground-image指定している場合は、要素に 入れておけばとりあえずはくっきりさせることは出来る。
imgはaltを入れてもtitleを入れても効果がない。

iScroll4を使うときは注意した方がいいです。
スクロールをスムーズにするためとかでtranslateZ使ってるから
スクロール要素内に入れた画像が全部ぼやけてしまう可能性があります。

ほかにもtranslateZ使うケースは結構あると思うんですけど、
もしAndroid4.x端末だけなんか画像がぼやけてるなーと思ったらtranslateZのせいということになるんじゃないかと思います。
ただtranslateZがかかってないところでもぼやけることがあったし、translateZやtranslate3dをつかっててもぼやけないこともあるので、ほかに起因がありそうです。
いい対策があればぜひおしえてください…

あー爆発すればいいのにAndroid。

もう一つ原因になりそうなもの
-webkit-backface-visibility:hidden を使うときは注意が必要です。

[js] スマートフォンのAjax フォーム送信時にキーボードを消す

Goボタンを押した時のイベントは
submit
もしくは
event.keyCodecode=13
で取れますが、
テキストフィールドやテキストエリアに入力後、スマホのキーボードでGoボタンを押した時、onsubmitをキャンセルしていたりするとキーボードが隠れないので、
キーボードが表示された要素からblur()でフォーカスを外す必要があります。

フォーム内に送信ボタンがあるならボタンにフォーカス移すのが手っ取り早い。

[js,css] テンキーがついているスマートフォンの罠

Androidを爆発し隊・投げ捨て隊に所属するみなさん、
ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。

スマホといえばiPhoneがその美しいデザインでこれぞスマホ!という概念を決定的に印象づけた
3〜4インチ前後のタッチパネルのものが主流ですが、
テンキーとか十字キーとかがついている狂った機種をお忘れじゃありませんか?

007sh

狂気の007SH
ぱっと見ガラケーなのに中身はAndroid。
画面はタッチパネル対応だから触ればタッチイベントが発生する。
007SHはソフトバンクから出てるものですが、シャープはaudocomoにもテンキー付きAQUOS PHONEを出してます。なんてことしやがる。
私はこのデバイスに触れて初めてスマホをへし折りたいと思いました。

幸い今の会社はテスト端末が豊富なのでスマケー()も実機で見る事が出来たんですが、
手元に無ければこんな機種絶対頭から抜け落ちるだろうと思うので
この機種に関する注意事項をちょっと書いておこうと思います。

“[js,css] テンキーがついているスマートフォンの罠” の続きを読む

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

“[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい” の続きを読む

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

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

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

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

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