title: Potential CSS Scroll Snap bug in Chrome (Windows). Two examples, only one work. Why?
body: <p>Here are two CSS scroll-snaps examples from <a href="https://css-tricks.com/practical-css-scroll-snapping/" rel="nofollow noreferrer">csstricks.com</a></p>
  
  <ul>
  <li><a href="https://codepen.io/jontin/pen/BaaYqWp" rel="nofollow noreferrer">Example #0</a> works on Chrome on Windows</li>
  <li><a href="https://codepen.io/jontin/pen/QWWQZpq" rel="nofollow noreferrer">Example #3</a> does not work</li>
  </ul>
  
  <p>Why does one of them work, and not the other; what is the difference between the two?</p>
  
  <p>Example 1:</p>
  
  <pre class="lang-css prettyprint-override"><code>.container {
      flex-basis: 50%;
      max-height: 100vh;
      overflow-y: scroll;
      border: 1px solid gray;
      scroll-snap-type: y mandatory;
      &amp;.proximity {
              scroll-snap-type: y proximity;
      }
  }
  
  li {
      border-bottom: 1px solid white;
      padding: 3rem;
      font-size: 1.4rem;
      color: rgba(white, .5);
      background: lightgray;
      text-align: center;
      scroll-snap-align: start;
      display: flex;
      flex-flow: column;
      justify-content: center;
  }
  </code></pre>
  
  <p>Example 2:</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      font-family: sans-serif;
      scroll-snap-type: mandatory;
      scroll-snap-points-y: repeat(100vh);
      scroll-snap-type: y mandatory;
  }
  section {
      border-bottom: 1px solid white;
      padding: 1rem;
      height: 100vh;
      scroll-snap-align: start;
      text-align: center;
      position: relative;
  }
  </code></pre>