search

Temzasse / react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
https://temzasse.github.io/react-modal-sheet/
MIT License
828 stars 78 forks source link

Bug on Safari Mobile, when switching the address bar up #155

Open CodeXiD opened 7 months ago

CodeXiD commented 7 months ago

When switching the address bar up on Safari Mobile there is a problem with recalculating the location of elements, visually they are in the right place, but when clicked they don't work (because they are actually displayed in a different place when viewing the debug)

bug-image

The screenshot shows that the "Collapse" button is lower than the blue block (the blue block is where the "Collapse" button is located according to dev-tools).

I tried to figure out the problem, I don't know for sure but I think the problem is safe-area-inset-top which is used to calculate the height (height: calc(100% - env(safe-area-inset-top) - 34px);)

Maybe it is adapted to the address bar at the bottom of the screen, I don't understand this topic enough, so if you can suggest, help or fix this behavior I would appreciate it.

By the way, not only the "Collapse" button behaves like this, but all elements inside the popup as well.

And also, this behavior is not reproducible on simulators, only on real devices.

jadus commented 1 month ago

Hi @CodeXiD , same issue here. Did you find an answer ?