style.cssTextにベンダープレフィックス付きプロパティをセットする検証コードをWebkit系ブラウザで見ると、
戻り値はセットした値と同じベンダープレフィックス付きプロパティになります。
var el = document.getElementById('helloWorld');
el.innerHTML = 'Hello, World!';
el.style.cssText = '-webkit-animation:hoge;';
document.write(el.style.cssText);
GALAXY Sなんとか端末の不具合っぷりは異常だぜ。
“[CSS3] GALAXY S2だけ :root 疑似クラスが効かない件” の続きを読む
selectをdisabledにすると通常はタップやクリックしてもoptionが開かなくなります。
でもAndroid4.0.xだと選択できないピッカーが表示されます……
Andoird2.3以下はピッカーが出ません。
どうしてこうなった……
ちなみに、[disabled]{pointer-events:none} かontouchstartにpreventDefaultしてあれば表示されません。
ゲージ作ってるとき発見した不具合（？）
CSSで可愛いふきだしを作ってたらAndroid4だけ歪んでたというので発覚した不具合。
CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。
その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、
参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。
でもよく調べてみたらそれだけじゃなかったんです。
Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。
調べついでにメディアクエリーも書いてみた。
最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。
Android4.xで画像という画像がぼやけまくるという怪現象があり、
シンプルな例を書いてみたらtranslateZが１つの原因のようでした。
translateZが親に指定されているだけでbackgroundだろうがborderだろうが画像が全部ぼやける。
空要素にbackground-image指定している場合は、要素に 入れておけばとりあえずはくっきりさせることは出来る。
imgはaltを入れてもtitleを入れても効果がない。
iScroll4を使うときは注意した方がいいです。
スクロールをスムーズにするためとかでtranslateZ使ってるから
スクロール要素内に入れた画像が全部ぼやけてしまう可能性があります。
ほかにもtranslateZ使うケースは結構あると思うんですけど、
もしAndroid4.x端末だけなんか画像がぼやけてるなーと思ったらtranslateZのせいということになるんじゃないかと思います。
ただtranslateZがかかってないところでもぼやけることがあったし、translateZやtranslate3dをつかっててもぼやけないこともあるので、ほかに起因がありそうです。
いい対策があればぜひおしえてください…
あー爆発すればいいのにAndroid。
もう一つ原因になりそうなもの
-webkit-backface-visibility:hidden を使うときは注意が必要です。
昨日LABI渋谷のスマホ売り場見てたら
Galaxy Nexusに続きAQUOS Phone 104SHもAndroid4.0だったので、
触りついでにHTML5 Testしてみたんです。
結果の256という点数はHTML5 Testにもう載ってるんですが、
その詳細は見た事なかったので晒しておきます。
Goボタンを押した時のイベントは
submit
もしくは
event.keyCodeのcode=13
で取れますが、
テキストフィールドやテキストエリアに入力後、スマホのキーボードでGoボタンを押した時、onsubmitをキャンセルしていたりするとキーボードが隠れないので、
キーボードが表示された要素からblur()でフォーカスを外す必要があります。
フォーム内に送信ボタンがあるならボタンにフォーカス移すのが手っ取り早い。
Androidを爆発し隊・投げ捨て隊に所属するみなさん、
ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。
スマホといえばiPhoneがその美しいデザインでこれぞスマホ！という概念を決定的に印象づけた
３〜４インチ前後のタッチパネルのものが主流ですが、
テンキーとか十字キーとかがついている狂った機種をお忘れじゃありませんか？
狂気の007SH
ぱっと見ガラケーなのに中身はAndroid。
画面はタッチパネル対応だから触ればタッチイベントが発生する。
007SHはソフトバンクから出てるものですが、シャープはauやdocomoにもテンキー付きAQUOS PHONEを出してます。なんてことしやがる。
私はこのデバイスに触れて初めてスマホをへし折りたいと思いました。
幸い今の会社はテスト端末が豊富なのでスマケー()も実機で見る事が出来たんですが、
手元に無ければこんな機種絶対頭から抜け落ちるだろうと思うので
この機種に関する注意事項をちょっと書いておこうと思います。
スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…
“[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい” の続きを読む
Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか
スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！
特に明記がないものはすべてWebkitについてです。
見つけ次第順次追加予定。
タイトル変更、増えてきたので目次追加しました。
この記事はiOS5、Android 3以前について記載したものです
“[css, css3, html] スマｰﾄフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)” の続きを読む