0

Сталкивался не раз:

Пусть фон страницы определен как 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; приводит к тормозам анимации?

1 ответ 1

1

Это думаю вопрос скорее к разарботчикам браузеров или к вычислительным мощностям вашего железа. А браузеры сами по себе довольно тормознутые изобретения что при излишних вычислительностях CSS3 их совсем убивает.

А чем второй способ не устроил?

1
  • Вопрос не к железу это точно. На старом пеньке с интегрированным видео адаптером и на core i7 с gtx 670 результат одинаковый. Второй способ устроил. Но вопрос был задан вполне определенно. Возможно тут появится тот, кто сможет объяснить почему так происходит. Кстати, по поводу браузеров. Проект бомбермен онлайн (bombermine.ru) доказывает обратное :) 17 мар 2013 в 10:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.