steven-tey / precedent

An opinionated collection of components, hooks, and utilities for your Next.js project.
https://precedent.dev
MIT License
4.78k stars 420 forks source link

Popup, Modal, and Tooltip animations bounce and reveal background on mobile #6

Closed kylemh closed 1 year ago

kylemh commented 1 year ago

This is crazy minor, but I follow you on Twitter and think you enjoy these polish challenges.

https://user-images.githubusercontent.com/9523719/212465084-ada79394-b9c0-40fe-a824-9a2078cb0608.MOV

Look at the bottom of the viewport in this video. The spring bounce in the animation is causing the container of the components (in the title of this issue) to bounce and reveal the overlay underneath briefly.

I'm not really sure what a solution might be. Maybe make the height of the containers like 110% so that the bounce doesn't reveal the overlay underneath?

steven-tey commented 1 year ago

Ooooh fantastic point, thanks for the heads-up! I did exactly as you suggested (gave the <Leaflet/> component a padding of 20 and made the origin position 20px lower) and this should be fixed now!