Horizontal CSS only parallax effect with layers greater than 100vw

Question

How to bootstrap a site with horizontal CSS only parallax effect?

Requirements

• CSS only parallax
• parent layer must have width/height == 100vw/100vh
• child layers must have width/height > 100vw/100vh
• child layers must visually align 100% with parent layers width
  • by now the child layers technically do have 100% of parents width but due to the perspective they visually don't appear to take 100% of parents width
• child layers (except the first) must have a top offset relative to its parent
• results must base on calculations to have maximum flexibility
• must be cross browser solid (at least newest version of majors)

What I have done so far

Actually this question is a follow-up question.
Here's a PEN with my current mockup state in SASS or CSS.

Working Simulated Example (jQuery)

In JavaScript its quite simple to achieve what I'm looking for. So here is a PEN that simulates the effect I'd like to mimic with CSS.

Already known Issues

The issue I'm most concerned about by now is the fact, that browser seem to render this scenario differently. See screenshot of browser window (chrome vs ff) scrolled to the right bottom corner below. But I hope this could be avoided.

There are so many parallax tutorials out there. Why is this different?

Actually I researched really a lot but didn't find not even one description how to implement horizontal parallax (means the child layers have a width > 100vw). Of course there are horizontal parallax scroll tuts out there. But they all have one in common: the child layer widths are always <= 100vw - and thats actually the difference.

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>

Answer 1

I'm not 100% certain I've gotten exactly what you're targeting, but I've at least got a step forward for you. In this article on pure-css parallax sites, there was an update regarding working around webkit related bugs by using perspective-origin-x: 100% and transform-origin-x: 100%.

If I apply this in both x and y directions to your current mockup case with sass, I end up changing just #projection and .pro to be like this:

#projection
  perspective: $perspective + 0px
  perspective-origin: 100% 100%
  height: 100%
  overflow: auto
  width: 100%

.pro
  @include projection()
  height: 100%
  position: absolute
  transform-origin: 100% 100%
  transform-style: preserve-3d
  width: 100%

And the parallax behavior starts to look much more like I might expect. Here is the final pen: https://codepen.io/kball/pen/qPbPWa/?editors=0100