title: How to fix jumpy scroll in Vue in v-for with elements being automatically added?
body: <p><a href="https://imgur.com/a/eZfWplU" rel="nofollow noreferrer">Screen recording</a></p>
  <p>In the above video the same webapp in Safari, Chrome and Firefox.</p>
  <p>After pressing start an infinite loop generates new tile, computed array places it &quot;temporary&quot; in the main array at a location determined by <code>window.scrollY</code>, waits 1 second, then adds this tile permanently to the array. Current <code>window.scrollY</code> is being updated every 8ms and is displayed at the top right corner.</p>
  <p>What I do is after start I wait for at least 5 tiles to be added and then scroll down slowly without letting go for 50-100 pixels. As you can see in the video Safari handles it well, scroll behaves as expected. Chrome suddenly jumps scroll to +200 or so, and Firefox jumps to the end of the array.</p>
  <p>You can disregard all <code>transition-group</code> animations and animation of each tile, disabling them didn't change anything. <code>ScrollTo</code> or anything similar is never used in the code.</p>
  <p><code>V-for</code> is used like this:</p>
  <pre><code>&lt;div id=&quot;tileStack&quot;&gt;
    &lt;transition-group name=&quot;transitionStack&quot; tag=&quot;ul&quot;&gt;
      &lt;TileItem 
        v-for=&quot;tile in tileStackWithGap&quot;
        :key=&quot;tile.key
      /&gt;
    &lt;/transition-group&gt;
  &lt;/div&gt;
  </code></pre>
  <p>with <code>tileStackWithGap</code> being the computed array with new tile sliced in.</p>
  <p>All related CSS rules are:</p>
  <pre><code>html, body, ul {
    margin: 0;
    padding: 0;
  }
  
  #tileStack {
    width: 100vw;
    padding: 40.5vh 0;
  }
  
  .tileMain {
    width: 30vh;
    max-width: calc(100vw - 4vh);
    height: 15vh;
    padding: 0px;
    margin: 2vh auto;
    border-radius: 3vh;
  }
  
  .tilePreview {
    width: 24vh;
    max-width: calc(80vw - 3.2vh);
    height: 12vh;
    border-radius: 2.4vh;
  }
  </code></pre>
  <p>with <code>tilePreview</code> being applied to the &quot;temporary&quot; tile.</p>
  <p>What can be causing this behaviour and is there a way to battle it?</p>