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

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

ただいまの
回答率

90.85%

  • HTML

    7799questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4972questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3493questions

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

  • CSS3

    1804questions

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

  • Webサイト

    958questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

cssで、background-attachment:fixed;にしてスクロールするとガタつきます

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 141

DDxlk

score 113

 やったこと

試しに手探りでページを作っていました。
イメージでは、大きい画像が上にボンとあって、その下にコンテンツが広がってるようなのが作りたかったんです。
ざっくりいうとElectronのサイトみたいな感じです。
よくありますよねこういうの。。

問題

そこで、

header {
    height: 900px;
    background-image: url(../img/header-bg.jpg);
    /* 画像を常に天地左右の中央に配置 */
    background-position: center center;

    /* 画像をタイル状に繰り返し表示しない */
    background-repeat: no-repeat;

    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
    background-attachment: fixed;

    /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
    background-size: cover;
  }


ヘッダーをこのようにして、この下にいろいろコンテンツを書いたのですが、画面サイズを変更してスクロールすると、画像がガタつきます。
その原因がわからず困っています。

ガタついてるのを撮影した動画です↓
https://vimeo.com/266161129

該当のコード

index.html

<html lang="ja">

<head>
  <title>テスト</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="Here is s3pt3mb3r home page." />
  <link rel="stylesheet" href="/css/index.css" />
  <!--Google Fontの読み込み-->
  <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
  <!--Font AwesomeのCDN読み込み-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous" />
</head>

<body>
  <header>
    <h1 class="header-title">テストです!!</h1>
    <p class="header-text">これは、テスト用に作ったページです。<br>テスト文字でございます!これはテスト文字でg</p>
  </header>
  <div class="contents">
    <h2>このサイトの含有物</h2>
    <hr width="500">
    <div class="section-wrapper">
      <section class="calam1">
        <i class="fab fa-gripfire fa-5x fa-fw"></i>
        <h3>これはテスト</h3>
        <p>テラテイルにあげるように改変しています</p>
      </section>

      <section class="calam2">
        <i class="fas fa-images fa-5x fa-fw"></i>
        <h3>&emsp;テスト&emsp;</h3>
        <p>テラテイルにあげるように改変しています</p>
        <a href="image.html" h class="button">テストボタン</a>
      </section>

      <section class="calam3">
        <i class="fas fa-envelope fa-5x fa-fw"></i>
        <h3>&emsp;&emsp;テスト&emsp;&emsp;</h3>
        <p>テラテイルにあげるように改変しています</p>
        <a href="letter.html" class="button">&emsp;テストボタン</a>
      </section>
    </div>
  </div>
  <footer>
    <p class="cp"><span class="cp-en">Copyright © 2018 </span>テスト<span class="cp-en"> All Rights Reserved.</span></p>
  </footer>
</body>

</html>
body {
    min-width: 1419px;
    margin: 0px;
    /* スペース */
    padding: 0px;
    /* 余白 */
  }

  p {
    font-family: "Mplus 1p";
    font-weight: 400;
  }

  header {
    height: 900px;
    background-image: url(../img/moss.jpg);
    /* 画像を常に天地左右の中央に配置 */
    background-position: center center;

    /* 画像をタイル状に繰り返し表示しない */
    background-repeat: no-repeat;

    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
    background-attachment: fixed;

    /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
    background-size: cover;
  }

  .header-title {
    color: white;
    font-size: 50px;
    position: absolute;
    top: 320px;
    left: 230px;
    font-family: "Mplus 1p";
    font-weight: 500;
  }

  .header-text {
    color: white;
    position: absolute;
    top: 400px;
    left: 230px;
    padding-top: 20px;
    font-family: "Rounded Mplus 1c";
    font-weight: 200;
  }

  @media screen and ( max-width:1170px) {
    .header-title {
      left: 140px;
    }
    .header-text {
      left: 140px;
    }
  }

  @media screen and ( max-width:970px) {
    .header-title {
      left: 70px;
    }
    .header-text {
      left: 70px;
    }
  }

  @media screen and ( max-width:558px) {
    .header-title,
    .header-text {
      margin-left: -60px;
    }
    .header-title {
      font-size: 40px;
    }
    .header-text {
      width: 300px;
      line-height: 1.7;
      margin-top: -10px;

    }
  }

  .contents {
    width: 1419px;
  }

  h2 {
    font-family: "Mplus 1p";
    font-weight: 500;
    margin-left: 570px;
    font-size: 30px;
  }

  section {
    margin-top: 30px;
    width: 200px;
  }

  i {
    color: #278ca3;
    padding: 0px 50px 0px;
  }

  h3 {
    padding-left: 45px;
    color: #278ca3;
    font-family: "Mplus 1p";
    font-weight: 400;
  }

  section p {
    color: #3c5b58;
    font-size: 13px;
  }

  .calam1 {
    float: left;
    margin-left: 204.75;
  }

  .calam2 {
    float: left;
    margin-left: 204.75;
  }

  .calam3 {
    float: right;
    margin-right: 204.75;
  }

  .button {
    display: block;
    text-decoration: none;
    background-color: cornflowerblue;
    color: black;
    border-radius: 2px;
    padding: 20px 20px 20px 50px;
  }

  .section-wrapper {
    overflow: hidden;
  }

  footer {
    margin-top: 40px;
  }

  footer .cp-en {
    font-family: "Raleway"
  }

  .cp {
    margin-left: 540px;
  }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/04/24 07:07

    index.js にはレイアウトに関するイベントは記述していないのでしょうか?もし記述しているようであればindex.jsの内容もご提示ください。

    キャンセル

  • DDxlk

    2018/04/24 11:07

    こんにちは!すみません、jsには何も記述していません!誤解を生む記述をしていました。修正いたします!

    キャンセル

回答 2

check解決した方法

0

-webkit-ベンダープレフィックスをつけることで解消されました

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

ブラウザは何を使って表示させているでしょうか?
background-attachment: fixedで調べたところ、
IEとIOSで不具合が確認されているそうです。

IEでは「画面をスクロールした際に背景がガタガタと動いてしまいます。」と
でています。

https://cunelwork.co.jp/blog/web/bugs-bg-attachment/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/24 13:51

    Google chromeです。なのでそれは当てはまらないと思われます

    キャンセル

  • 2018/04/24 14:32

    スクロールしたとき画像が遅れて処理しているのかも。
    確かにchromeだとこういう現象が起きました。
    Firefoxならスムーズにいくみたいです。
    ブラウザの違い?

    一応こういう対応をされている方もおられましたので
    載せておきます。
    https://qiita.com/mimoe/items/07486fa85fbfc6f80315

    おもうような解決法が見つからず申訳ありません。

    キャンセル

  • 2018/04/24 15:25

    記事にしたがってみましたが、効果はありませんでした。
    そもそもposition:fixed;のガタつきに関する対処法なので本件とは無関係ですね

    キャンセル

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

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

関連した質問

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

  • HTML

    7799questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4972questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3493questions

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

  • CSS3

    1804questions

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

  • Webサイト

    958questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。