"exaggerated scroll" about react-spring-bottom-sheet HOT 7 CLOSED

All right thanks for the help! I'll get to the bottom of this when I'm back home tomorrow 🙌

from react-spring-bottom-sheet.

That took longer than expected, but I think I figured it out. If onDismiss is defined it seems like the problem doesn't happen. Can you confirm if that's true for your case as well? Here's a repro of them side by side: https://codesandbox.io/s/reproducing-issue-react-spring-bottom-sheet-33-hw27l?file=/src/App.js

Fix coming up!

from react-spring-bottom-sheet.

Oh my goodness! It's out of control! 😲

I have a hunch of what's going on, since it's overshooting in that odd way it makes me think it might be caught in another "stacking context". It's rendering at the bottom of document.body inside a reach-portal element to avoid these things. Things that can create a new stacking context is using transform or will-change, a typical trick on mobile to upgrade an element to render on the gpu instead of cpu to improve scrolling performance and such.

To find the cause look at the CSS on html or body, the culprit should be there somewhere. Since the sheet itself is inside a position fixed element it's not affected by sibling elements in the rest of what's inside body.

from react-spring-bottom-sheet.

Thanks for the fast reply!

I'm afraid it doesn't seem that there's any styles on the html or body elements that should be affecting it. To be sure I tried opening the Chrome DevTools and disabled all styles on the html and body elements (there was a few box-sizing resets and font-family's, but nothing I could see would have this effect on the dragging.

I then tried to remove pretty much all of my app, all head tags (like viewport etc) and have the BottomSheet at the root of the app, and the problem persisted.

I guess it's time to try to create an entirely new project and see if the problem happens there too.

from react-spring-bottom-sheet.

Aha! I thought I was going crazy, but it does seem like a general problem.

I tried to create a totally new app with create-react-app and the problem is there too, which leads me to think I must be doing something wrong.

I am using the following code:

import { BottomSheet } from 'react-spring-bottom-sheet';
import 'react-spring-bottom-sheet/dist/style.css'

and then simply:

<BottomSheet open={true}>
	<p>This is a test</p><p>This is a test</p><p>This is a test</p><p>This is a test</p>
</BottomSheet>

to show it. Am I missing something obvious here? I tried pretty much copying from the examples.

from react-spring-bottom-sheet.

I'm having the same exact issue. I have no styles on html or body appart from an overflow:hidden on body.
Also working with a cra app and using a simple example as @MartinMouritzen did causes the bottom sheet to go crazy.

from react-spring-bottom-sheet.

🎉 This issue has been resolved in version 2.2.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from react-spring-bottom-sheet.