turbinikarpus
@turbinikarpus

Подтормаживает анимация из-за background-size: cover?

Простой макет, состоящий из двух слоев. Первый слой фиксированный, остальные нет.

После нажатии на ссылку ведущую к якорю, на какие-то миллисекунды анимация притормаживает, далее анимация отрабатывает плавно.

Так же, при скролле, поддергивает фон в фиксированном слое.
Такое происходит только если к фону применен: background-size: cover;

Без, вся анимация от и до проходит плавно.
Помогите разобраться из-за чего это происходит?

Пример в живую
Zip архив

Исходный код:
<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;
      }
    }
  });
});
  • Вопрос задан
  • 476 просмотров
Пригласить эксперта
Ответы на вопрос 1
chlp
@chlp
фулстек
Возможно, это происходит из-за того, что WebKit не кеширует измененные через CSS изображения, что и вызывает подтормаживание, т.к. браузер долго перерисовывает большое изображение.
Вам может помочь srobbin.com/jquery-plugins/backstretch/.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы