Scrolling on iOS is blocked even when blocking is set to false

If you open the BottomSheet it will block any scrolling containers on iOS even if the BottomSheet is configured as false. Example link: https://react-spring-blocking-ios-scroll.vercel.app/ Example code:

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

export default function Home() {
	const [open, setOpen] = useState(false);
	return (
		<>
			<button onClick={() => setOpen(true)}>Open</button>
			<div style={{ border: '3px solid red', overflowY: 'scroll', height: '100px' }}>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
				<div>1</div>
			</div>
			<BottomSheet open={open} blocking={false}>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
				<div>Bottom Sheet Content</div>
			</BottomSheet>
		</>
	);
}

[spencersteers]

Ran into this too. Adding data-body-scroll-lock-ignore="true" will fix it.

[leecrossley]

There are potentially some improvements that can be made here, some ideas:

• checking to see if the body content is scrollable, a lot of modern web / hybrid apps don’t have a scrollable body and this default will have some devs tearing their hair out for a couple of hours (cough) or:
• snapPoints all greater than 0, then ignore?
• -webkit-fill-available might be worth a look?
• 1px bottom hack?

Thanks for a great lib 😃