overflow: auto displays scrollbars during animation

[ty-bt]

windows chrome 102.0.5005.63

https://codesandbox.io/s/naughty-butterfly-ze3mcu?file=/src/App.js

When overflow is auto, the scroll bar will flicker during animation
Subsequent animation flickers after scrolling scrollbar manually

[justin-schroeder]

Not sure there is a good solution to this other than setting your styles appropriately. I dont think we can make any reliable determination of what the users desired styles are here. For example, we could put overflow: none durring the animation, but that would make the parent's scrollbars pop on/off during animation when there should be a scroll bar. Open to suggestions though.

[ty-bt]

@justin-schroeder And the first animation after moving the scroll bar will be abnormal

[Daneng66]

@ty-bt Did you figure out a solution for this?

[glekner]

Not sure there is a good solution to this other than setting your styles appropriately. I dont think we can make any reliable determination of what the users desired styles are here. For example, we could put overflow: none durring the animation, but that would make the parent's scrollbars pop on/off during animation when there should be a scroll bar. Open to suggestions though.

@justin-schroeder why not do the following:

1. before starting the animation, we determine if the container has overflowing content or not for each axis (e.g. is p.scrollHeight > p.offsetHeight)
2. only if there is no overflowing content, we can safely add overflow: hidden until the animation finishes.