css dev html markup smartphone web 未分類

androidでcss3のグラデーションがきかない

タイトル通り。
css3の linear-gradient とかって、ジェネレータとか
たくさんあって、簡単に実装できるけど、それが何故か
firefoxとかで見れるのにスマホ実機で表示されない。
たとえば3色のグラデーションなら普通は、

 background-image: linear-gradient(top, #f69 0%, #eee 50%, #03f 100%); 

▲基本形がこんな書き方かな。でfirefox用は ▼

 background-image: -moz-linear-gradient(top, #f69 0%, #eee 50%, #03f 100%); 

▲ こうなる。「-image」じゃなくても狙い通り表示できる多分。がしかし、

 background-image: -webkit-linear-gradient(top, #f69 0%, #eee 50%, #03f 100%); 

▲ これはchromeで表示できても、ぼくのandroid君(Android 2.3)では表示しない。
(勿論ブラウザはwebkit系)

 background-image: -webkit-gradient(linear,left top,left bottom, from(#f69), color-stop(0.50, #eee), to(#03f)); 

▲これでやっと思い通り表示できた
内訳は、
「背景画像:webkit-グラデーション(直線,開始位置,終了位置,開始色,中間色(割合,色),終了色);
って感じ。
chromeは何かver.によって挙動ってか書き方が違うぽい。
んで、背景画像とグラデーションを同時に指定するには

  background-image:url(/image/arrow.png) no-repeat 100% 50%,  -webkit-gradient(linear,left top,left bottom, from(#eee), to(#bbb)); 

▲こんな感じでイケるはずやけど、PCで表示できてもスマホ実機が表示してくれなかた。
これ url と gradient の順番が逆やったらPCでもちゃんと表示できへん。
1時間ほど悩んでスマホの背景画像とグラデの両方指定断念。別の作戦にした。
(背景画像じゃなくて普通にimgタグ置いた)
ぬーん、マークアップって簡単そうで奥が深いなー。
ちなみに上記の三色グラデーションを実装するとdemo▼sample

アクア フレーッシュ！！

こうなる。。
※ InternetExplorer等の残念なブラウザをお使いの方は正しく表示できません。google chrome等のイケてるブラウザでご覧ください