3

iOS5 と iOS6 の Mobile Safari が -webkit-radial-gradient を処理する方法に矛盾があることに気付きました。これを webapp で修正したいと考えています。

次の例を見てください。

div {
    width:100%;
    height:100%;
    background-color: black;
    background-image: -webkit-radial-gradient(center center, circle cover, rgba(255,255,255,1), rgba(0,0,0,0) 75%);
    position:absolute;
}

に適用されます

<div>&nbsp;</div>

表示/編集可能: http://jsfiddle.net/kJ8z3/3/ モバイル デバイスの場合: http://fiddle.jshell.net/kJ8z3/3/show/

なぜかiOS6ではグラデーションが「強め」になっています。

デスクトップ上の Google Chrome (WebKit 537.4) または Safari (Webkit 534.57.2) の更新されたバージョンは、iOS5 に似たグラデーションを生成するため、おそらく直接 WebKit の問題ではありません。

どちらのデバイスも 32 ビットの色深度 (screen.colorDepth) を報告しますが、iOS5 からのグラデーションは、バンディングを示すアーティファクトまたは低い色深度を示しているようです。Google Chrome は 32 ビット深度を報告しますが、24 ビット色深度のみを報告する Desktop Safari よりもバンディングが多くなります。

何が起こっているのか分かりますか？または、より重要なことに、実用的な観点から、2 つの違いをどのように調整できますか? アルファ透明度が白から透明にフェードする、同じようにレンダリングされた放射状グラデーションが欲しいです。

4

1 に答える 1

0

それが全面的に「機能する」ように私には思えます。それは、OSやデバイスなどの間でどれだけうまく機能するかという問題です。Photoshopのバンディングの問題を解決するために、グラデーションに3番目、場合によっては5番目の色を追加すると、視覚的な結果がかなり向上します。プログラムが担当する色遷移の量を削減します（すべてを計算する必要があります...）。

とにかく、私はあなたのグラデーションに3番目の色を追加しました、そしてそれは物事を引き締めました。 http://fiddle.jshell.net/8U46E/

あなたがPhotoshopの男/ギャルでないなら、このサイトは少し役立つかもしれません：http: //www.colorzilla.com/gradient-editor/

于 2012-12-29T17:01:34.753 に答える