回答編集履歴

5

説明追記

2020/09/14 10:39

投稿

hatena19
hatena19

スコア33773

test CHANGED
@@ -12,6 +12,8 @@
12
12
 
13
13
  ```
14
14
 
15
+ Safari の transparent は rgba(255,255,255,0) (黒の透明)になっているのが原因らしいです。
16
+
15
17
 
16
18
 
17
19
  [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法](https://glatchdesign.com/blog/transparent-css-gradient-safari/)

4

コード修正

2020/09/14 10:39

投稿

hatena19
hatena19

スコア33773

test CHANGED
@@ -6,9 +6,9 @@
6
6
 
7
7
  color: red;
8
8
 
9
- background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, rgba(255,204,0,1)));
9
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, #ffcc00));
10
10
 
11
- background: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,204,0,1) 70%);
11
+ background: linear-gradient(rgba(255,255,255,0) 50%, #ffcc00 70%);
12
12
 
13
13
  ```
14
14
 

3

リンク追加

2020/09/14 10:29

投稿

hatena19
hatena19

スコア33773

test CHANGED
@@ -14,4 +14,8 @@
14
14
 
15
15
 
16
16
 
17
- [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法 | ブログ | Glatch(グラッチ) - 夫婦で活動するフリーランスWeb制作ユニット](https://glatchdesign.com/blog/transparent-css-gradient-safari/)
17
+ [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法](https://glatchdesign.com/blog/transparent-css-gradient-safari/)
18
+
19
+
20
+
21
+ [マーカー風に線を引くCSSをSafariで表示したら上半分がグレーになってしまった件](https://www.kazmia.co.jp/cssmaker/)

2

コード修正

2020/09/14 10:27

投稿

hatena19
hatena19

スコア33773

test CHANGED
@@ -4,15 +4,11 @@
4
4
 
5
5
  ```css
6
6
 
7
- .guide2-text span {
8
-
9
7
  color: red;
10
8
 
11
- background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,204,0,0)), color-stop(70%, rgba(255,204,0,1));
9
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, rgba(255,204,0,1)));
12
10
 
13
- background: linear-gradient(rgba(255,204,0,0) 50%, rgba(255,204,0,1) 70%);
11
+ background: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,204,0,1) 70%);
14
-
15
- }
16
12
 
17
13
  ```
18
14
 

1

リンク追加

2020/09/14 10:18

投稿

hatena19
hatena19

スコア33773

test CHANGED
@@ -15,3 +15,7 @@
15
15
  }
16
16
 
17
17
  ```
18
+
19
+
20
+
21
+ [透過のCSSグラデーションでSafariだけ黒くなる原因と解決法 | ブログ | Glatch(グラッチ) - 夫婦で活動するフリーランスWeb制作ユニット](https://glatchdesign.com/blog/transparent-css-gradient-safari/)