background-attachment: исправлено, что не работает должным образом в Firefox

Question

Я пытаюсь реализовать следующий код для моего веб-сайта:

https://codepen.io/pizza3/pen/NgXowe

При открытии в Chrome фоновые изображения срезов располагаются правильно, и все срезы накладываются на каждомдругой будет отображать все изображение.

Однако при просмотре с помощью Firefox (версия Qunatum 60.0.1 (64-разрядная версия)) вы можете заметить, что фоновые изображения расположены не одинаково.Мне кажется, это связано с исходной точкой изображений или чем-то подобным, но я не могу понять, в чем проблема.

Я считаю, что соответствующая часть проблемы здесь:

.left,
.right {
    position: relative;
    width: 50vw;
    height: 20vh;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
 }

Это ошибка Firefox?

Другими словами, как можно распределить одно и то же фоновое изображение по нескольким DIV?

Как мне решить эту проблему?

Спасибо

РЕДАКТИРОВАТЬ

Вот пара скриншотов для иллюстрации проблемы:

Chrome:

Firefox:

Answer 1

Похоже, что, хотя и нелогично, поведение Firefox (и Edge) является предназначенным и корректным согласно спецификации: свойство transform (используемое библиотекой GSAP для анимации) делает background-attachment: fixed ведут себя как scroll.Поэтому я бы предложил удалить background-attachment: fixed и заменить его другими значениями background-position для каждого среза изображения.

Может быть, этот ответ также будет уместен: https://stackoverflow.com/a/43067630/2533215