background: linear-gradientをCSSで指定するとiphoneの時に表示が変わる

Question

◎実現したいこと

　PCでは綺麗に背景色の黄色が表示されていますが、iphoneのsafariのブラウザで表示を確認すると以下の画像のように黒いラインが入ってしまいます。

ブラウザごとのデフォルトかなと考えておりますが、スマホでもPCと同じように表示する方法を教えて頂けると幸いです。

□PCでの表示

□iphoneでの表示

□CSS

background: linear-gradient(transparent 20%, #ffff00 50%);
}

Answer 1

- background: linear-gradient(transparent 20%, #ffff00 50%);
+ background: linear-gradient(#ffffff 20%, #ffff00 50%);

Comments

[退会済みユーザー]

解決できました！ありがとうございます！

Answer 2

- background: linear-gradient(transparent 20%, #ffff00 50%);
+ background: linear-gradient(rgba(255, 255, 255, 0) 20%, #ffff00 50%);

【Appleデバイスでtransparentのグラデーションが黒くなる現象 | 無題のブログ】
https://necomesi.jp/blog/taiki/posts/4

解決策は色指定を明示的にすること

Comments

[退会済みユーザー]

解決できました！ありがとうございます！