Streaming live at 10am (PST)

Fixed Modal Bug on Mobile

On the home page of my site I have a fixed modal that pops up when you click the Info (about page) link in the top right corner. It’s small and centered on all desktop and tablet devices when it appears, but on mobile I’ve chosen to have it fill the entire screen.

However, there’s still a slight scrolling bug. My wrapper around it is set to a 100% white background color, with the intent of it completely covering the body of my site, while this modal appears.

In theory you shouldn’t ever see the real site when the modal is open, but there’s a glitch when you first scroll on mobile - see attached screen shot. You can see the body slightly on the body of the page when you first scroll, before the modal adjusts and covers it.

Is there any way I can lock everything into place and cover the whole body so this doesn’t happen? Any help would be greatly appreciated. Thanks.

Read only: https://preview.webflow.com/preview/dan-kanvis?utm_source=dan-kanvis&preview=4beb61bc52da88631af0a894af0e99dd


Website: http://www.dankanvis.com

The scroller is the scroller of the entire page (Change modal bg to opacity 50% to see the problem). You should prevent page from scroll (By js or any other trick).

Posts related: