CSS scroll-snap with Chrome

Question

I use CSS scroll-snap in my Angular application to scroll from section 1 to 2 etc. It works perfectly fine in Firefox but not in Chrome. In Chrome it is jumping too far and always skipping one section (when using the mouse for scrolling, using the touchpad it works as expected).

So far, I have figured out that it is because the container element has position: absolute set. This is required.

Here is my Codepen

.container {
  position: absolute;
  z-index: 99999999999999999;
  overflow: auto;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  overflow-y: scroll;
  height: 530px;
  scroll-snap-type: y mandatory;
  width: 100%;
  left: 0;
}
.section {
  height: 500px;
  scroll-snap-align: center;
  box-sizing: border-box;
}

<div class="container">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
  <div class="section">4</div>
  <div class="section">5</div>
</div>