javascript - With flexbox and "column-reverse", the page jumps when scrolling on Chrome

Question

I've been trying to figure out the issue for days, but I still can't reproduce it outside of my web app.

I have a scrollable list that looks something like this: https://codesandbox.io/s/jolly-galileo-gk5x1?file=/src/App.js

When scrolling up, new items are loaded on top. I need flex-direction: column-reverse to scroll to the bottom as soon as the page is loaded.

The issue is that when a new item is loaded, it often scrolls up by a few hundred pixels. It happens when I scroll with a mouse or a trackpad on Chrome. It doesn't occur in Firefox, Edge, or Chrome when simulating touch using mobile mode. I couldn't reproduce it in the CodeSandbox link above and my web app isn't live yet.

Adding overflow-anchor: none didn't fix it. What are some other possible issues? I rewrote the c ode several times, so I think it's likely a browser quirk. Also, I don't think this issue occurred before I updated to Chrome 87.

Edit: Disabling smooth scroll seems to fix it. Still trying to figure out how to fix smooth scroll.

Smooth scroll on: https://imgur.com/HJz3n0T

Smooth scroll off: https://imgur.com/ugxxJlc

question from:https://stackoverflow.com/questions/65640888/with-flexbox-and-column-reverse-the-page-jumps-when-scrolling-on-chrome

Answer 1

Waitting for answers