Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome scroll bar invalid after I use { Motion, spring } for sidebar slider switching #562

Open
TaurusWood opened this issue Dec 19, 2018 · 1 comment

Comments

@TaurusWood
Copy link

TaurusWood commented Dec 19, 2018

There is a sidebar in my program that uses the overflow-y:auto attribute

Then I tried to use ref to focus() and forceupdate() on the Slider component, but it didn't work. Even if focus() and forceupdate() are used long after the animation ends with setTimeout(), it is useless.

Later, I accidentally triggered a dispatch and the scroll bar returned to normal. I guess this is related to the view update of react

link: https://codesandbox.io/embed/1or9k8x857

version: react: 16.6.0 react-motion: 0.5.2

@nkbt
Copy link
Collaborator

nkbt commented Dec 19, 2018

It is smth to do with css not rm. if you remove

image

now things look a bit ugly and scrollbar is on the right - but it is working correctly.

One of my usecases with rm is exactly this kind of sidebar in even more complicated situation (kind of hard to extract so cannot post it here without spending too much time.

My suggestion would be write what you want in pure html + css (no react/rm, you can just save your codesandbox as html page without JS) and make sure it works well. Then in the place where you have width: XXpx - use rm to do animation. In this way you will certainly know things are going to work well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants