Сталкивался не раз:
Пусть фон страницы определен как div следующего класса
.front-bg {
position: fixed;
width: 100%;
height: 100%;
left: 0%;
background: #000;
background: url('../img/background.jpg') 50% 50% no-repeat;
background-size: cover;
}
Если добавить на странице несколько jQuery методов .animate, которые манипулируют объектами выходящими за область видимости браузера, то начинаются подтормаживания и тд.
Пример использующегося метода .animate :
$('.second_step_page.active').animate({opacity: '1', right : '-=618px'}, 400);
Выяснил, что в тормозах виновато CSS свойство
background-size: cover;
Если сделать фон страницы иным образом, например так:
<img src="img/background.jpg" class="bg">
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
то все тормоза магическим образом пропадают. Собственно вопрос:
Почему background-size: cover; приводит к тормозам анимации?