7

写真はそれをすべて説明する必要があります。左側はSafari6で、右側はChromeです。透明な赤のグラデーションの下半分が完全に間違っているだけでなく（おそらく、熱心な事前乗算されたアルファの場合である可能性があります）、上半分も暗く、ガンマ補正の問題のように見えます。

この問題は、MountainLionのSafari6およびiOS6Mobile Safariで発生しますが、LionのSafari6では発生しません。

http://jsfiddle.net/ZUTYm/4

誰かが期待される結果を得るための解決策を見つけましたか？テキストをフェードインおよびフェードアウトしようとしているので、グラデーションにアルファを含める必要があります。

実際のコードを入力するまで編集を完了できないので、ここにグラデーションの定義があります。background-image: -webkit-linear-gradient(top, red, rgba(255,128,128,0), white);

ここに画像の説明を入力してください

4

1 に答える 1

4

Mac 10.8.1 Safari 6.0（8536.25）およびiOSSafari6.0.1で問題を再現できました。-webkit-mask-image透明なカラーストップの代わりに適用すると、問題を回避できると思います。

.grad-bg {
    background-image: 
        -webkit-linear-gradient(top, #ff0000, #fff);
    height: 100%;
}

.masked {
    -webkit-mask-image:
        -webkit-linear-gradient(top, white, transparent, white);
}

jsFiddle

この画像では、上部が白い背景の上に表示され、下部の形状が同じ色の不透明なグラデーションの背景の上に表示されています。

上は白い背景の上に表示され、下の形状は同じ色の不透明なグラデーションの背景の上に表示されます。

（多くの編集。）

于 2012-12-11T04:05:54.063 に答える