title: CSS Scroll Snapping, vertical not working
body: <p>I used <a href="https://css-tricks.com/practical-css-scroll-snapping/" rel="nofollow noreferrer">this article</a> as a point of reference, in particular <a href="https://codepen.io/maxakohler/pen/KBKNxd" rel="nofollow noreferrer">this working snippet</a>, but in my page (the script below) the vertical snap scrolling isn't working. Why?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    height: 100vh;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
  }
  
  section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
  }
  
  .one {
    background-color: red;
  }
  
  .two {
    background-color: blue;
  }
  
  .three {
    background-color: grey;
  }
  
  .four {
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent row"&gt;
    &lt;section class="one"&gt;
    &lt;/section&gt;
    &lt;section class="two"&gt;
    &lt;/section&gt;
    &lt;section class="three"&gt;
    &lt;/section&gt;
    &lt;section class="four"&gt;
    &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>