Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】3つのグラデーション【実験】

 どうも!LSSです!!

 

朗報、と言うべきかどうなんだか?
iOSのブラウザにあった、ある問題が解決していたようです。

 

 

3つのグラデーション

 

 

 

 

 

 

↑「赤から黄色」に変化するグラデーションを3つ、置いてみました。

この3つが違うグラデーションに見える方はおられますか?

ちなみに、LSSの環境では、「WindowsGoogleChrome」「Androidはてなアプリ」「iPhoneはてなアプリ」で「3つとも同じように」見えます。

 

 

コード

<div style="background-color: #ffff00; background-image: linear-gradient(90deg,#ff0000,#ff000000);"> </div>
<p> </p>
<div style="background-color: #ffff00; background-image: linear-gradient(90deg,#ff0000,transparent);"> </div>
<p> </p>
<div style="background-color: #ffff00; background-image: linear-gradient(90deg,#ff0000,#00000000);"> </div>

 

3本とも「背景色は黄色」で、その上に、
一番上のは「赤→透明な赤」に変化するグラデーション。
真ん中のは「赤→transparent」に変化するグラデーション。
一番下のは「赤→透明な黒」に変化するグラデーション、という書き方をしています。

 

 

以前には

WindowsChromeで見た時には、「赤→透明な黒」という指定の場合、「途中が黒っぽくなる」ように見えていました。
そして「赤→transparent」の場合には黒は出てこず、「赤→透明な赤」と同じように変化していたんですね。

 

一方、iPhoneのブラウザで見た時には「赤→transparent」の時と「赤→透明な黒」の場合に、「途中が黒っぽくなる」現象が発生。

 

つまり今回の例を以前の状態で見た場合に、
WindowsChromeで見た時には一番下だけが途中黒っぽく」
iPhoneで見た時は下2つが途中黒っぽく」
なるという状態だったんです。

 

 

iOS15.4で修正されたらしい

2022年3月(つい先日ですね)のiOS15.4で、この修正が入り、他の色とtransparentのグラデーションで黒っぽくなるのが解消されたとか。

それと別に、(自分の記憶違いでなければ)Windows+Chromeの「透明な黒へのグラデーション」の途中色の変化の仕方も変わったのかも?(ここは自分の記憶でしかないので自信はイマイチ^^;)

 

とりあえず、大手のブラウザでだいたい同じように見えるようになった、と思っていいのかな?(iPhoneでOSアップデートをスルーしてる人や、他に未対応ブラウザを使っている方には今でも違って見えるのかも)

 

もし、上記3本のグラデーションが違うように見える方がおられましたら、コメントで教えていただけると嬉しいです。

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^