teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTMLに関する質問マーカーがスマホで見ると汚くなる

編集履歴

回答編集履歴

5

説明追記

2020/09/14 10:39

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -5,6 +5,7 @@
5
5
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, #ffcc00));
6
6
  background: linear-gradient(rgba(255,255,255,0) 50%, #ffcc00 70%);
7
7
  ```
8
+ Safari の transparent は rgba(255,255,255,0) （黒の透明）になっているのが原因らしいです。
8
9
 
9
10
  [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法](https://glatchdesign.com/blog/transparent-css-gradient-safari/)
10
11
 

4

コード修正

2020/09/14 10:39

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  ```css
4
4
  color: red;
5
- background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, rgba(255,204,0,1)));
5
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, #ffcc00));
6
- background: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,204,0,1) 70%);
6
+ background: linear-gradient(rgba(255,255,255,0) 50%, #ffcc00 70%);
7
7
  ```
8
8
 
9
9
  [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法](https://glatchdesign.com/blog/transparent-css-gradient-safari/)

3

リンク追加

2020/09/14 10:29

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -6,4 +6,6 @@
6
6
  background: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,204,0,1) 70%);
7
7
  ```
8
8
 
9
- [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法 | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット](https://glatchdesign.com/blog/transparent-css-gradient-safari/)
9
+ [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法](https://glatchdesign.com/blog/transparent-css-gradient-safari/)
10
+
11
+ [マーカー風に線を引くCSSをSafariで表示したら上半分がグレーになってしまった件](https://www.kazmia.co.jp/cssmaker/)

2

コード修正

2020/09/14 10:27

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -1,11 +1,9 @@
1
1
  transparent を使わずに、rgba() で透明度を設定してみてください。
2
2
 
3
3
  ```css
4
- .guide2-text span {
5
4
  color: red;
6
- background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,204,0,0)), color-stop(70%, rgba(255,204,0,1));
5
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, rgba(255,204,0,1)));
7
- background: linear-gradient(rgba(255,204,0,0) 50%, rgba(255,204,0,1) 70%);
6
+ background: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,204,0,1) 70%);
8
- }
9
7
  ```
10
8
 
11
9
  [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法 | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット](https://glatchdesign.com/blog/transparent-css-gradient-safari/)

1

リンク追加

2020/09/14 10:18

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -6,4 +6,6 @@
6
6
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,204,0,0)), color-stop(70%, rgba(255,204,0,1));
7
7
  background: linear-gradient(rgba(255,204,0,0) 50%, rgba(255,204,0,1) 70%);
8
8
  }
9
- ```
9
+ ```
10
+
11
+ [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法 | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット](https://glatchdesign.com/blog/transparent-css-gradient-safari/)