CSS Parallax表现得很奇怪，背景被切断了

Question

我试图在这个网站上设置CSS Parallax，但是我们根本无法改变它的一般结构。

这是help page，您可以在此处查看FINANCE SPECIALISTS面板上的问题。除了被切断的背景之外它工作得很好，似乎只是面板的高度，但它应该更高，所以当你向下滚动时你不能看到顶部。

我的代码简要概述：

＆＃13;

＆＃13;

html {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  overflow: hidden;
}

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  &__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    &--base {
      transform: translateZ(0);
    }
    &--back {
      transform: translateZ(-1px) scale(2);
    }
  }
}

body {
  font-family: @alpha-font;
  font-size: 16px;
  font-weight: 400;
  background: @secondary-colour;
  color: @text-colour;
  .parallax;
}

.row-block.finance {
  padding: 75px 0;
  height: 320px;
  overflow: hidden;
  .parallax__layer--back {
    transform: translateZ(-1px) scale(2);
    background: url('@{dealer-img}/theme/finance-bk.jpg') center center no-repeat;
    background-size: cover;
  }
  .container {
    overflow: visible;
  }
}

＆＃13;

<!-- Homepage Search Finance -->
<div class="{v2_4_MOBILE_ON_OFF} {v2_4_TABLET_ON_OFF} {v2_4_DESKTOP_ON_OFF}">
  <div class="row-block finance parallax__group">
    <div class="parallax__layer--back parallax__layer"></div>
    <div class="parallax__layer--base parallax__layer" id="budget-search-thirds">
      <div class="row">
        <div class="sixcol"></div>
        <div class="sixcol last">
          <h2><span class="preHeading">Used Car</span>Finance Specialists</h2>
          <p class="right">We have relationships with high street lenders and specialist motoring finance houses too, that is why <strong>we have helped hundreds of customers</strong> secure the <strong>best finance deal</strong> for their budget.</p>
          <div class="fin-slider">
            <div id="finance-budget-range-min" class="clear-fix">
              <div class="row">
                <div class="budget-slider">
                  <div class="form-group">
                    <label for="amount-budget-range-min">Monthly Budget:</label>
                    <input type="text" id="amount-budget-range-min" />
                  </div>
                  <div class="slider-group">
                    <div id="slider-range-min"></div>
                  </div>
                </div>
                <div class="search-btn">
                  <a id="button-budget-range-min" class="button" href="/search_page.php?budget=200" title="budget search">Search</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- // Homepage Search Finance -->

＆＃13;

＆＃13;

＆＃13;