質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.50%

safariでcssグラデーションが反映されない対処法について

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 882

score 69

現在トップの下半分に下から黒のグラデーションをcssで設定しようとしています。

macやwinのクロームでは問題なく表示されていたのですが、safariでだけグラデーションが効きません。

下記サイト参考にrgbaで色指定しても相変わらずでした。

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

このやり方にこだわらなくてもいいのですが、他に画面半分グラデーション入れるのにおすすめのやり方はありませんでしょうか?
アドバイスいただけると助かります。
よろしくお願いします。

safariでの現象

safari

クロームでの現象

crome

<main>
<div class="scroll">
    <div class="scroll-wrap">
      <p class="scroll-text"><a href="#about">SCROLL</a></p>
    </div>
  </div>
</main>
.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
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • yoshinavi

    2019/09/08 12:12

    他のブラウザではどうなのですか?キャプチャ等提示可能ですか?

    キャンセル

  • m.ts10806

    2019/09/09 11:54

    「想定通りできているブラウザ」の画面キャプチャもご提示ください。

    キャンセル

  • roronoazoro

    2019/09/09 22:41

    クロームでの状態も追加いたしました。

    キャンセル

  • キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る