Непреднамеренный эффект тряски при применении анимации jQuery в Chrome ⇐ Html

[Anonymous]

Я использую приведенный ниже код для создания полноразмерного веб-сайта со скользящими фоновыми изображениями. все работает нормально с Firefox и IE, но в Chrome и Safari фон дрожит во время анимации. Я также заметил, что скорость анимации увеличивается со временем (не фактическая переменная, но кажется, что через некоторое время она движется быстрее). Есть идеи, как это исправить или, может быть, новое решение, чтобы полностью избежать animate()?

Код: Выделить всё

$(function() {

//settings for slider
var width = '100%';
console.log(width)
var animationSpeed = 2000;
var pause = 5000;
var currentSlide = 1;

//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);

var interval;

function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}

$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);

startSlider();

});

Код: Выделить всё

html,body {
background-color:black;
height: 100%;
margin: 0px;
padding: 0px;
}

.container {
width: 100%;
min-height: 100%;
height: 100%;
padding: 0;
}

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.row {
padding: 0;
}
.header {
background-color: white;
height: 85px;
}

#slider {
width: 100%;
height: calc(100% - 250px);
overflow: hidden;
}

#slider .slides {
display: block;
width: 600%;
height: 100%;
margin: 0;
padding: 0;
}

#slider .slide {
float: right;
list-style-type: none;
width: 16.666666667%;
height: 100%;
}

.footer {
color: white;
height: 165px;
padding: 72px 0  0 470px;
}

.slide1 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide2 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide3 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide4 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide5 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}

Код: Выделить всё

[img]http://placehold.it/156x33[/img]

Proin bibendum ligula massa nec maximus.

[list]
[*]
[*]
[*]
[*]
[*]
[*]
[/list]


[list]
[*]Lorem ipsum dolor sit
[/list]

Подробнее здесь: https://stackoverflow.com/questions/369 ... ith-chrome