Animation slows down due to background-size: cover?

Question

css

A simple layout consisting of two layers. The first layer is fixed, the rest are not.

After clicking on the link leading to the anchor, the animation slows down for some milliseconds, then the animation works out smoothly.

Also, when scrolling, it supports the background in a fixed layer.
This happens only if the background is applied: Without, the entire animation runs smoothly from and to. Can you help me figure out why this is happening? Example live Zip archive Source code:background-size: cover;

<section class="section-fixed">
      <div class="fixed-content">
        <div class="container">
          <h1>Заголовок</h1>
          <a href="#2">Якорь</a>
        </div>
      </div>
    </section>

    <section id="2" class="section">
      <div class="container">
        <p>
          Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </div>
    </section>

    <section class="section section-second">
      <div class="container">
        <p>
          Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </div>
    </section>

    <section class="section section">
      <div class="container">
        <p>
          Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </div>
    </section>

    <section class="section section-second">
      <div class="container">
        <p>
          Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
        </p>
      </div>
    </section>

html * {
    webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, 
*:after, 
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%; 
  font-family: Arial, sans-serif; 
  font-size: 16px; 
  line-height: 21px; 
  color: #3d3536;
}
body, 
html {
  height: 100%;
}
a {
  color: #b4d7a8; 
}

.container {
  width: 980px;
  margin: 0 auto;
}

.container::after {
  content: '';
  display: table;
  clear: both;
}

.section-fixed {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: table;
  width: 100%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../img/bg.jpg");
  background-attachment: fixed;
  z-index: 1;
}

.fixed-content {
  display: table-cell;
  vertical-align: middle;
}

.fixed-content h1 {
  position: fixed;
  text-align: center;
  font-size: 30px;
  color: white;
  margin: 0 100px;
}

.fixed-content a {
  position: fixed;
  text-align: center;
}

.section {
  padding: 100px 0;
  background-color: #fff;
  position: relative;
  z-index: 2;
}

.section-second {
  background: #ccc;
}

/* --- Section-fixed --- */
$(document).ready(function() { vph = $(window).height(); 
  $('.section-fixed').css('height',vph); }); 
    $(window).resize(function(){ vpw = $(window).width(); 
    vph = $(window).height(); $('.section-fixed').css('height',vph); 
});

/* --- Smooth Scroll --- */
 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});

Answer 1

Perhaps this is due to the fact that WebKit does not cache images modified via CSS, which causes stuttering, because. the browser takes a long time to redraw the large image. srobbin.com/jquery-plugins/backstretch/
can help you.