質問編集履歴

3 クローム

roronoazoro

roronoazoro score 69

2019/09/09 22:40  投稿

safariでcssグラデーションが反映されない対処法について
現在トップの下半分に下から黒のグラデーションをcssで設定しようとしています。
macやwinのクロームでは問題なく表示されていたのですが、safariでだけグラデーションが効きません。
下記サイト参考にrgbaで色指定しても相変わらずでした。
[透過のCSSグラデーションでSafariだけ黒くなる原因と解決法
](https://glatchdesign.com/blog/web/css/1254)
このやり方にこだわらなくてもいいのですが、他に画面半分グラデーション入れるのにおすすめのやり方はありませんでしょうか?
アドバイスいただけると助かります。
よろしくお願いします。
## safariでの現象
![safari](5a83c77fbd60529b00a1d2946e5ac1a8.jpeg)
 
## クロームでの現象  
![crome](b94a0806f234efa2bda4864d85da8228.png)  
```html
<main>
<div class="scroll">
   <div class="scroll-wrap">
     <p class="scroll-text"><a href="#about">SCROLL</a></p>
   </div>
 </div>
</main>
```
```css
.main {
   position: relative;
}
.top-box .scroll {
   width: 100%;
   height: 50vh;
   position: absolute;
   top: 75%;
   left: 50%;
   z-index: 2;
   -webkit-transform: translateY(-50%) translateX(-50%);
   transform: translateY(-50%) translateX(-50%);
   background: linear-gradient(to bottom, rgba(255,255,255,0), #030000 70%);
}
@media screen and (max-width: 768px) {
 .top-box .scroll {
   top: 72%;
   background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #030000)
 }
}
.top-box .scroll .scroll-text {
 position: absolute;
 top: 75%;
 left: 50%;
 -webkit-transform: translateY(-50%) translateX(-50%);
 transform: translateY(-50%) translateX(-50%)
}
.top-box .scroll .scroll-text a {
 position: relative;
 font-size: 12px;
 line-height: 3;
 color: #fff;
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 transform: rotate(-540deg);
 letter-spacing: .2em;
 top: -120px
}
@media screen and (max-width: 768px) {
 .top-box .scroll .scroll-text a {
   font-size: 11px;
   font-size: 1.1rem
 }
}
.top-box .scroll .scroll-text a:before {
 position: absolute;
 content: "";
 display: block;
 width: 1px;
 height: 126px;
 background: #ffffff;
 bottom: 0;
 left: 0;
 top: -143px;
 right: 0;
 margin: 0 auto
}
@media screen and (max-width: 768px) {
 .top-box .scroll .scroll-text a:before {
   height: 25.33333vmin
 }
}
```
  • CSS3

    5528 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    10484 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

2 ごじ

roronoazoro

roronoazoro score 69

2019/09/08 10:09  投稿

safariでcssグラデーションが反映されない対処法について
現在トップの下半分に下から黒のグラデーションをcssで設定しようとしています。
下記サイト参考にrgbaで色指定しても相変わらずでした。
[透過のCSSグラデーションでSafariだけ黒くなる原因と解決法
](https://glatchdesign.com/blog/web/css/1254)
このやり方にこだわらなくてもいいのですが、他に画面半分グラデーション入れるのにおすすめのやり方はありませんでしょうか?
アドバイスいただけると助かります。
よろしくお願いします。
## safariでの現象
![safari](5a83c77fbd60529b00a1d2946e5ac1a8.jpeg)
```html
<main>
<div class="scroll">
   <div class="scroll-wrap">
     <p class="scroll-text"><a href="#about">SCROLL</a></p>
   </div>
 </div>
</main>
```
```css
.main {
   position: relative;
}
.top-box .scroll {
   width: 100%;
   height: 50vh;
   position: absolute;
   top: 75%;
   left: 50%;
   z-index: 2;
   -webkit-transform: translateY(-50%) translateX(-50%);
   transform: translateY(-50%) translateX(-50%);
   background: linear-gradient(to bottom, rgba(255,255,255,0), #030000 70%);
}
@media screen and (max-width: 768px) {
 .top-box .scroll {
   top: 72%;
   background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #030000)
 }
}
.top-box .scroll .scroll-text {
 position: absolute;
 top: 75%;
 left: 50%;
 -webkit-transform: translateY(-50%) translateX(-50%);
 transform: translateY(-50%) translateX(-50%)
}
.top-box .scroll .scroll-text a {
 position: relative;
 font-size: 12px;
 line-height: 3;
 color: #fff;
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 transform: rotate(-540deg);
 letter-spacing: .2em;
 top: -120px
}
@media screen and (max-width: 768px) {
 .top-box .scroll .scroll-text a {
   font-size: 11px;
   font-size: 1.1rem
 }
}
.top-box .scroll .scroll-text a:before {
 position: absolute;
 content: "";
 display: block;
 width: 1px;
 height: 126px;
 background: #ffffff;
 bottom: 0;
 left: 0;
 top: -143px;
 right: 0;
 margin: 0 auto
}
@media screen and (max-width: 768px) {
 .top-box .scroll .scroll-text a:before {
   height: 25.33333vmin
 }
}
```
  • CSS3

    5528 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    10484 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1 safariグラデ

roronoazoro

roronoazoro score 69

2019/09/08 10:07  投稿

safariでcssグラデーションが反映されない対処法について
現在トップの下半分に下から黒のグラデーションをcssで設定しようとしています。
macやwinで検証して問題なく思えたのですが、safariでだけグラデーションが聞いていなく黒くなってしまいます。
下記サイト参考にrgbaで色指定しても相変わらずでした。
[透過のCSSグラデーションでSafariだけ黒くなる原因と解決法
](https://glatchdesign.com/blog/web/css/1254)
このやり方にこだわらなくてもいいのですが、他に画面半分グラデーション入れるのにおすすめのやり方はありませんでしょうか?
アドバイスいただけると助かります。
よろしくお願いします。
 
## safariでの現象  
![safari](5a83c77fbd60529b00a1d2946e5ac1a8.jpeg)  
```html
<main>
<div class="scroll">
   <div class="scroll-wrap">
     <p class="scroll-text"><a href="#about">SCROLL</a></p>
   </div>
 </div>
</main>
```
```css
.main {
   position: relative;
}
.top-box .scroll {
   width: 100%;
   height: 50vh;
   position: absolute;
   top: 75%;
   left: 50%;
   z-index: 2;
   -webkit-transform: translateY(-50%) translateX(-50%);
   transform: translateY(-50%) translateX(-50%);
   background: linear-gradient(to bottom, rgba(255,255,255,0), #030000 70%);
}
@media screen and (max-width: 768px) {
 .top-box .scroll {
   top: 72%;
   background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #030000)
 }
}
.top-box .scroll .scroll-text {
 position: absolute;
 top: 75%;
 left: 50%;
 -webkit-transform: translateY(-50%) translateX(-50%);
 transform: translateY(-50%) translateX(-50%)
}
.top-box .scroll .scroll-text a {
 position: relative;
 font-size: 12px;
 line-height: 3;
 color: #fff;
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 transform: rotate(-540deg);
 letter-spacing: .2em;
 top: -120px
}
@media screen and (max-width: 768px) {
 .top-box .scroll .scroll-text a {
   font-size: 11px;
   font-size: 1.1rem
 }
}
.top-box .scroll .scroll-text a:before {
 position: absolute;
 content: "";
 display: block;
 width: 1px;
 height: 126px;
 background: #ffffff;
 bottom: 0;
 left: 0;
 top: -143px;
 right: 0;
 margin: 0 auto
}
@media screen and (max-width: 768px) {
 .top-box .scroll .scroll-text a:before {
   height: 25.33333vmin
 }
}
```
  • CSS3

    5528 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    10484 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る