In the video above, I demonstrate the same web application in Safari, Chrome, and Firefox.
Upon hitting start, an infinite loop creates a new tile, places it temporarily in the main array based on window.scrollY, waits for 1 second, then permanently adds the tile to the array. The current window.scrollY is continuously updated every 8ms and displayed at the top right corner of the screen.
My test involves waiting for at least 5 tiles to be added, then slowly scrolling down without releasing the mouse button for 50-100 pixels. Safari handles this smoothly, while Chrome suddenly jumps the scroll position by +200 pixels and Firefox jumps to the end of the array.
It's worth noting that disabling all transition-group animations and per-tile animations had no effect. Additionally, no usage of ScrollTo or similar methods exist in the code.
The v-for directive is implemented as follows:
<div id="tileStack">
<transition-group name="transitionStack" tag="ul">
<TileItem
v-for="tile in tileStackWithGap"
:key="tile.key
/>
</transition-group>
</div>
Where tileStackWithGap contains the computed array with new tiles included.
All relevant CSS rules are defined as:
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;
}
The tilePreview class is applied to the "temporary" tiles.
What might be causing this unexpected behavior and how can it be resolved?