search

AlexanderRichey / styled-react-modal

Styled modal component for React 💅⚛️
The Unlicense
213 stars 22 forks source link

Modal gets covered by navigation bar and toolbar in Safari #31

Closed hiwenny closed 4 years ago

hiwenny commented 4 years ago

Hey @AlexanderRichey, heads-up that the 100vh is not compatible with dynamic toolbars - like in Safari. It gets obscured by the dynamic toolbar and nav bar when using viewports as base height https://mobile.twitter.com/simevidas/status/779161023790116865 https://www.eventbrite.com/engineering/mobile-safari-why/

Changing it to 100% to use the screen size, rather than static viewports works. This will make it scale down when the nav bar appears.

PR in https://github.com/AlexanderRichey/styled-react-modal/pull/30 but up to your considerations

AlexanderRichey commented 4 years ago

The reason I went with 100vh/100vw for the default background settings is that very often webpages have heights that do not stretch to the bottom of the screen. In that case, you get a poor experience where the modal background doesn't fill the whole screen.

If these defaults don't work for your needs, you can override them by providing your own modal background component.