title: CSS Scroll Snap Behaviour like Firefox
body: <p>I've encountered a problem on every browser other than firefox on macos and android (havent tested windows and ios) where the scroll snapping is delayed. On Firefox it works beautifully, but on Edge, Chrome and Safari it's delayed. Is there any fix for this?</p>
  <p>My code:</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>.scroll-snap-container {
      height: 100vh;
      scroll-snap-type: mandatory;
      scroll-snap-points-y: repeat(100vh);
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      overflow-scrolling: touch; /* Needed to work on iOS Safari */
      overflow: auto;
  }
  .scroll-snap-container &gt; div {
      height: 100vh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      position: relative;
  }
  p {
    background-color: #000a;
    color: white;
    position: absolute;
  }
  img {
      height: 100vh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="scroll-snap-container"&gt;
      &lt;div&gt;
          &lt;p&gt;Long text here.&lt;/p&gt;
          &lt;img src="https://placeimg.com/640/480/any/sepia"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;p&gt;Long text here.&lt;/p&gt;
          &lt;img src="https://placeimg.com/641/480/any/sepia"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;p&gt;Long text here.&lt;/p&gt;
          &lt;img src="https://placeimg.com/642/480/any/sepia"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>EDIT: Added html snippet</p>