はじめに

今年もあと少しで終わりますね！
今年1年コーディングをしてきていくつかバグに遭遇したので備忘録ついでに残しておこうと思います

safari transparentがグレーになる

これはよく知られているバグですね
iOSが15系になっても存在しています

よく出会うパターンとしては、透過のcssグラデーションでtransparentを使うときでしょうか

例）
background: linear-gradient(to left, transparent 0%, #fff 50%);

こういった場合にsafariだとtransparent指定した箇所がグレーになってしまいます
解消方法は簡単でtransparent指定の代わりにrgbaを使うだけです

解消方法）
background: linear-gradient(to left, rgba(0,0,0,0) 0%, #fff 50%);

なぜグレーになるのか

時間があったので少し原因を調査してみました
なぜグレーになってしまうのかはmozillaやW3Cのドキュメントに記載があります

transparent は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密には、transparent は rgba(0,0,0,0) のショートカットです。

transparent
Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

要するにtransparentはrgba(0,0,0,0)と同義になるということです
先ほどの指定を言い換えるとrgba(255,255,255,1)からrgba(0,0,0,0)へのグラデーションとなります
すなわちアルファは透明になっていき、色は白から黒へと変わるという意味になります
さらにmozillaにはtransparentについてNoteが記載されており、古いブラウザーについてはアルファが0の値である場合に黒として扱うとの記載もあります。

Note: グラデーションの場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は transparent をアルファ乗算色空間で計算するように定めています。しかし、古いブラウザーはアルファチャンネルが 0 の値である黒として扱うかもしれません。

これによりsafariでtransparentがグレーになってしまうようです

はじめにも書きましたが最新のOSでも解消はされていないため、今後もtransparentではなくrgba指定で記載するのが良さそうです

lottieを使ったときにiOS15系でsafariがクラッシュする

これは記載の通りなのですが、lottieを使った場合にiOS15系でsafariがクラッシュするバグがありました
原因としては、lottieで使うjsonファイルの書き出しに何らかの原因があるようです
解決方法としては、jsonファイルの書き出し内容を調整するか、その部分だけlottieを使わないで別の方法で実装するかになると思います

まだ詳細な原因までは追い切れていませんが、iOS14までは正常に動作していたため内部的な部分が何か変わったのではないかと思っています
もし既に何か知っている人がいらっしゃったらコメントいただけると幸いです

safariでflex gapが効かない

gapとはcssのプロパティで、行や列の隙間を定義するものです
使い道としては、flexやgridを使うときに大体の場合アイテムの隙間を定義すると思いますが、それを簡単に定義することができるものです
特にflexと組み合わせて使われることが多いんじゃないかなと思います

ただそこには少し落とし穴があり、flexを使った場合のgapはsafariだと14.5以降でないと使えません
便利なプロパティですが、iOSは直近2バージョンのサポートをすることが多いため、気軽に使えるようになるにはもう少し時間がかかりそうです

さいごに

今年も1年間お疲れ様でした
振り返ってみると個人としてはあまりバグに出会わなかった年な気がします
これもIEが動作保証から消え始めていることが大きいですね

それでは来年以降もよりバグに出会わない年になることを願って...