Функция параллакса нервная только при использовании обложки размера фона

Question

Я пытался создать функцию параллакса с контейнером с плавной прокруткой. Я столкнулся с вопросом о том, что прокрутка может быть нервной только при использовании background-position: cover. Если вы измените его на background-position: 100% 100%, функция будет плавной. Я также могу добавлять изображения непосредственно в тег img, и это прекрасно.

Это происходит только при первой прокрутке вниз после загрузки страницы. Браузер, кажется, вносит коррективы, и он сглаживается. Но в первый раз, когда вы прокручиваете, это немного нервно.

Так что мой вопрос состоит из двух частей. Почему это происходит и что было бы хорошим решением проблемы. Я не могу найти решение, используя только css. Я могу сделать что-то, например, поместить изображение в тег img и полностью разместить его, используя javscript и установить либо высоту 100%, либо ширину 100% в зависимости от родительского контейнера. Я пытался использовать подгонку объекта, но это также использует покрытие, и проблема не устранена. Я также могу использовать javascript, чтобы установить положение фона, но я хотел посмотреть, есть ли метод не javascript.

Вот код:

Codepen

// helper functions
const getRect = el => {
  return el.getBoundingClientRect();
};

const setStyles = (c, s) => {
  const height = getRect(c).height;
  c.style.position = 'fixed';
  c.style.left = '0';
  c.style.top = '0';
  c.style.width = '100%';
  s.style.height = height + 'px';
  s.style.width = '1px';
  s.style.position = 'relative';
};

const getWin = () => {
  const height = window.innerHeight;
  const width = window.innerWidth;
  const rem = parseInt(
    window.getComputedStyle(document.documentElement).fontSize
  );
  return {
    height,
    width,
    rem,
  };
};

//main controller function
const scrollController = function(opts){
	const ease = 0.09;
  const container = opts.container;
  const spacer = opts.spacer;
	const elements = opts.elements;
  let win = getWin();
  let ys = 0;
  let yc = ys;
  let AF = null;
  let tweens = [];
	
	const startAnimation = () => {
    if (!AF) AF = requestAnimationFrame(render);
  };

  const cancelAnimation = () => {
    yc = ys;
    cancelAnimationFrame(AF);
    AF = null;
  };
	
  const render = () => {
    const diff = ys - yc;
    const delta = Math.abs(diff) < 0.1 ? 0 : diff * ease;
    if (delta) {
      yc += delta;
      yc = parseFloat(yc.toFixed(2));
      updateElements();
      AF = requestAnimationFrame(render);
    } else {
      cancelAnimation();
    }
  };
	
	const updateElements = () => {
		container.style.transform = `translateY(${-yc}px)`;
		elements.forEach(element => {
			element.style.transform = `translateY(${yc / 6}px)`;
		})
	}
	
  const updateScroll = () => {
    ys = window.scrollY;
    startAnimation();
  };
	
	//initialize
	setStyles(container, spacer);
	window.addEventListener('scroll', updateScroll, false);
}

const controller = new scrollController({
	container: document.querySelector('.scroll-container'),
	spacer: document.querySelector('.spacer'),
	elements: document.querySelectorAll('.bg')
})

.container{
	margin: 0 auto;
	padding: 50px 0;
	max-width: 90%;
}

.wrapper{
	position:relative;
	height: 50vh;
	overflow:hidden;
}

.wrapper.first{
	height: 100vh;
}

.bg{
	position:absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 200%;
	background-size: cover !important;
/* 	background-size: 100% 100% !important; */
	background-position:center !important;
}

.one{
	background: url(https://image.tmdb.org/t/p/original/upUy2QhMZEmtypPW3PdieKLAHxh.jpg) ;
}

.two{
	background: url(https://image.tmdb.org/t/p/original/vsGummv4RDHurznV22UkumeI3fS.jpg) ;
}

.three{
	background: url(https://image.tmdb.org/t/p/original/ocUrMYbdjknu2TwzMHKT9PBBQRw.jpg) ;
}

.four{
	background: url(https://image.tmdb.org/t/p/original/lP5eKh8WOcPysfELrUpGhHJGZEH.jpg) ;
}

.five{
	background: url(https://image.tmdb.org/t/p/original/jiqD14fg7UTZOT6qgvzTmfRYpWI.jpg);
}

.six{
	background: url(https://image.tmdb.org/t/p/original/oLma4sWjqlXVr0E3jpaXQCytuG9.jpg);
}

<div class="scroll-container">
	<div class="container">
		<div class="wrapper first">
			<div class="bg one"></div>
		</div>

		<div class="wrapper">
			<div class="bg two"></div>
		</div>

		<div class="wrapper">
			<div class="bg three"></div>
		</div>

		<div class="wrapper">
			<div class="bg four"></div>
		</div>
		
		<div class="wrapper">
			<div class="bg five"></div>
		</div>
		
		<div class="wrapper">
			<div class="bg six"></div>
		</div>
		
		</div>
	</div>
</div>

<div class="spacer"></div>