現場での業務からのお話です。

デザイナーさんから頂いたPSDファイルを元にコーディング作業を進めるのですが、
今回、背景画像の端っこがフェードアウトしていくデザイン（画像背景→白背景）になっておりました。
背景がループしたデザインなので、いつも通りCSSプロパティの「background-repeat」で表示を繰り返していき、端っこの部分は疑似要素（after）を用いてフェードアウト専用のエリアを作成。そこにグラデーションを作れるプロパティ「linear-gradient」を使えば再現出来ると考え実行しました。

linear-gradient(to bottom, '画像', '白');

単純に白を使うと万が一他のエリアで背景色を使いたいとなった際や、画像と被った時に手間がかかってしまうので透明色を使おう！という事で透明色である「transparent」を設定しました。
再現出来たので各ブラウザ（ChromeやEdge）で確認し、表示に問題ないのを見ているとタブレット端末で悲劇は起きました……

「謎の濃いグレーの線が入っている」

再度PCの各ブラウザで確認しましたがそれらしき物は見当たりませんでした。しかしタブレット端末で見ると何故か入っている……
linear-gradientの指定方法に誤りがあると思い、調べてみましたが特に間違った点が見つからない……
調べ方を変えて、同じ様な現象が起きた人はいないか調べたところ下記の記事に辿り着きました。

記事を読み進めると自分に起きた現象と全く同じ事が起きていました。
どうやら機種によって見え方に違いがある様です。
※タブレット機種にだけ起きたのは自分が担当していたのがPC・タブレット専用のページであった為ですね。参画している現場はレスポンシブをせずにPC・タブレットとスマートフォン用で別々で構成されたページになっています。

「厳密には、transparent は rgba(0,0,0,0) のショートカットです」
（MDN Web Docsから引用）
https://developer.mozilla.org/ja/docs/Web/CSS/color_value

これは盲点でした。ただ「透明色」という認識でしたが正しくは「透明化された黒色」という訳だったのですね。
rgbaのaは「アルファ値」を示していて0が透明で1が透過されてない状態を表すので、
この部分もグラデーションを設定した事により数値が変わっていく……という事でした。

今回の解決策として

linear-gradient('背景画像', rgba(255, 255, 255, 0))

この様に記述して「透明化された白」とした所、問題の濃いグレーの線はタブレット端末の画面から姿を消してくれました。

便利なので何かと使う機会の多いtransparentですが、この様な落とし穴があるとは思いませんでした。
皆さんも使い慣れたはずのプロパティの仕様で混乱しないように、時々調べ直してみると良いと思います！