androidのwebkit-box-reflectのバグ

Question

私はモバイルWebviewアプリケーション（androidとios：so webkitのみ）に反射を追加しようとしています。私はstackoverflowを含むかなり良いサイトで見たようにWebkit-Box-Reflectを実装しました。

"-webkit-box-reflect: below -14px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));" 

私はあなたがAndroid上で見ることができるように

をWebKitのそれがマスクされていないとして、他の全てのAndroid

そして、そのようなことに、何の反射が存在しないことを求めるが、それは単にぼんやりした画像に勾配をつけます。 （Webkitモバイルのマスクバグのようです）。私は簡単に白（緑）よりも別の色を入れ、向きを逆にすることができましたが、私は背景が普通ではなく背景が必要です。

誰かがアイデアを持っていますか？私は無地の背景に自分の仕事を表示するアンドロイドまたはちょうどに言及していない見たすべてのサイト...

Answer 1

はマスク

-webkit-ボックス反映のための透明なイメージを使用してください：0PXのURL（「image.png」の下に）;

それはAndroidのブラウザは、箱反映上のマスクとしてWebKitのグラデーションをサポートしていませんアンドロイド2.3

Answer 2

に私のために働きます。 Ali.MDが指摘しているように、マスクにはPNG画像を使用できます。別のHTTPリクエストを追加しないようにするに

、あなたもhttp://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ようなもので、データURIにPNGに変換することができます：

img { 
    -webkit-box-reflect: below 0 
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAyCAYAAACUEBHwAAAAIklEQVQ4jWP8//8/AzpgwhAZFRwVHBUctIIsDAwMXFQWBAAW4QORoT0UUQAAAABJRU5ErkJggg==); 
}