pure css parallax without scroll bounds

Question

I am trying to implement a pure css scroll parallax effect on a section of a page. I am using This approach as base. The problem with this approach is that vertical scroll is created for parallax container to be functional. But I don't want that. Contents must NOT hide inside scroll box when I scroll. Contents must scroll normal, respective to body element, I just want that one layer to scroll more slowly (just for one section of site). Unfortunately, I can't provide a functioning code snippet, because I am struggling with implementation. You can see in my example, that everything hides inside scroll window. The parallax effect is functional, but I want to get rid of those scroll window bounds. The problem is, I don't even know how to search for a solution. Any thoughts, ideas

.parallax {
  height: 657px;
  position: relative;
  perspective: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-style: preserve-3d;
}

.parallax__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__item--front {
  transform: translateZ(0);
  height: 100%;
}

.parallax__item--back {
  transform: translateZ(-600px) scale(2);
}

<div class="parallax">
  <div class="parallax__item parallax__item--back">
    <svg xmlns="http://www.w3.org/2000/svg" class="bubbles bubbles--back" viewBox="0 0 906 614.085">
        <g transform="translate(-200 -7207.581)">
            <ellipse class="bubble" cx="12" cy="11.5" rx="12" ry="11.5" transform="translate(284.042 7386.666)" fill="#fff"></ellipse>
            <ellipse class="bubble" cx="7.5" cy="8" rx="7.5" ry="8" transform="translate(856.355 7719.581)" fill="#a27f85"></ellipse>
            <circle class="bubble" cx="12" cy="12" r="12" transform="translate(795.355 7207.581)" fill="#a27f85"></circle>
            <circle class="bubble" cx="20" cy="20" r="20" transform="translate(453.355 7549.581)" fill="#a27f85"></circle>
            <circle class="bubble" cx="12" cy="12" r="12" transform="translate(570.355 7285.581)" fill="#fff"></circle>
            <circle class="bubble" cx="12" cy="12" r="12" transform="translate(785.355 7528.581)" fill="#fff"></circle>
        </g>
    </svg>
  </div>
  <div class="parallax__item parallax__item--front">
    <svg xmlns="http://www.w3.org/2000/svg" class="bubbles bubbles--front" viewBox="0 0 906 592">
        <g transform="translate(-200 -7229.666)">
            <g class="text-bubble">
                <circle cx="90" cy="90" r="90" transform="translate(359 7229.666)" fill="#a27f85"></circle>
                <text class="bubble-text" transform="translate(449 7311.666)" fill="#fff" font-size="30" font-family="ProximaSoft-Bold, Proxima Soft" font-weight="700"><tspan x="-60.945" y="0">text</tspan><tspan x="-75.15" y="34">text</tspan></text>
            </g>
            <g class="text-bubble">
                <circle cx="120.5" cy="120.5" r="120.5" transform="translate(865 7409.666)" fill="#a27f85"></circle>
                <text transform="translate(986 7503.666)" fill="#fff" font-size="30" font-family="ProximaSoft-Bold, Proxima Soft" font-weight="700"><tspan x="-79.905" y="0">text</tspan><tspan x="-65.73" y="34">text</tspan><tspan x="-82.275" y="68">text</tspan></text>
            </g>
            <g class="text-bubble">
                <circle cx="107" cy="107" r="107" transform="translate(200 7607.666)" fill="#a27f85"></circle>
                <text class="bubble-text" transform="translate(307 7705.666)" fill="#fff" font-size="30" font-family="ProximaSoft-Bold, Proxima Soft" font-weight="700"><tspan x="-89.16" y="0">text</tspan><tspan x="-97.65" y="34">text</tspan></text>
            </g>
        </g>
    </svg>
  </div>
</div>

?