マーカーがスマホで見ると汚くなる

Question

文字のマーカーを使ってみました。

上記のようにPCのクロームでは綺麗に写りますが、iphoneのクロームで見るとなんか薄汚れた感じになってしまいます。
どうすれば直るのでしょうか？

<p>「<span>広告運用は初めて????</span>」という方はもちろん、「<span>WEBマーケティングで悩んでる????</span>」という方も、<br>
      あなたが関わる事業を伸ばすために、ぜひご活用ください。</p>
    </div>

<div class="guide2-text"> <p>「<span>広告運用は初めて????</span>」という方はもちろん、「<span>WEBマーケティングで悩んでる????</span>」という方も、<br> あなたが関わる事業を伸ばすために、ぜひご活用ください。</p> </div> ``` .guide2-text { margin: 0px auto; padding: 10px 10px 10px 20px; } .guide2-text p { text-align: center; font-size: 20px; font-weight: bold; }

.guide2-text span {
color: red;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(70%, #ffcc00));
background: linear-gradient(transparent 50%, #ffcc00 70%);
}

Answer 1

transparent を使わずに、rgba() で透明度を設定してみてください。

  color: red;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, #ffcc00));
  background: linear-gradient(rgba(255,255,255,0) 50%, #ffcc00 70%);

Safari の transparent は rgba(255,255,255,0) （黒の透明）になっているのが原因らしいです。

透過のCSSグラデーションでSafariだけ黒くなる原因と解決法

マーカー風に線を引くCSSをSafariで表示したら上半分がグレーになってしまった件

Comments

[takawork]

ありがとうございます。こちらサファリの質問だったのにそこまで予測されて大変ありがたかったです。