Как загрузить сайт с горизонтальным эффектом только параллакса CSS?

Требования

• CSS только параллакс
• родительский слой должен иметь ширину/высоту == 100vw/100vh
• дочерние слои должны иметь ширину/высоту > 100vw/100vh
• дочерние слои должны визуально выравнивать 100% с шириной родительских слоев
  • к настоящему времени дочерние слои технически имеют 100% ширины родителей, но из-за perspective они визуально не отображают 100% ширины родителей.
• дочерние слои (кроме первого) должны иметь верхнее смещение относительно его родительского
• результаты должны основываться на расчетах с максимальной гибкостью.
• должен быть перекрестным браузером (по крайней мере, новейшая версия майоров).

Что я сделал до сих пор

На самом деле этот вопрос является последующим вопросом.
Здесь PEN с моим текущим состоянием макета в SASS или CSS.

Рабочий симулированный пример (jQuery)

В JavaScript его довольно просто добиться того, что я ищу. Итак, вот PEN, который имитирует эффект, который мне нужен для имитации CSS.

Уже известные проблемы

Проблема, к которой я сейчас больше всего беспокоюсь, заключается в том, что браузер, похоже, делает этот сценарий по-разному. Смотрите снимок экрана окна браузера (chrome vs ff), прокручиваемого в нижнем правом углу ниже. Но я надеюсь, что этого можно избежать.

Там так много уроков параллакса. Почему это отличается?

На самом деле я много исследовал, но не нашел ни одного описания, как реализовать горизонтальный параллакс (это означает, что дочерние слои имеют ширину > 100 вольт). Конечно, есть горизонтальная прокрутка parallax. Но все они имеют одно общее: ширина детского слоя всегда равна <= 100vw - и на самом деле это различие.

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#projection {
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-perspective-origin: 0 0;
  perspective-origin: 0 0;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.pro {
  -webkit-transform: scale(1) translate(0px, 0px) translateZ(0px);
  transform: scale(1) translate(0px, 0px) translateZ(0px);
  height: 100%;
  position: absolute;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
}

.pro--1 {
  -webkit-transform: scale(4) translate(0px, 0px) translateZ(-3px);
  transform: scale(4) translate(0px, 0px) translateZ(-3px);
  width: 110%;
}

.pro--2 {
  -webkit-transform: scale(3) translate(0px, 1em) translateZ(-2px);
  transform: scale(3) translate(0px, 1em) translateZ(-2px);
  width: 110%;
}

.pro--3 {
  -webkit-transform: scale(2) translate(0px, 2em) translateZ(-1px);
  transform: scale(2) translate(0px, 2em) translateZ(-1px);
  width: 110%;
}

.pro {
  background: rgba(0, 0, 0, 0.33);
  box-shadow: inset 0 0 0 5px orange;
  color: orange;
  font-size: 4em;
  line-height: 1em;
  text-align: center;
}

.pro--2 {
  box-shadow: inset 0 0 0 5px green;
  color: green;
}

.pro--3 {
  box-shadow: inset 0 0 0 5px blue;
  color: blue;
}

<div id="projection">
  <div class="pro pro--1">pro--1</div>
  <div class="pro pro--2">pro--2</div>
  <div class="pro pro--3">pro--3</div>
</div>