I'm not a total newbie in mobile development, but I usually focus more on the logic side rather than UX. Lately, I've been facing challenges while building fullscreen modals with forms on mobile devices, particularly on Safari. I'm struggling with issues like viewport shifting, elements jumping around when the keyboard pops up, and inputs disappearing, among other weird behaviors. Can anyone share how they successfully implement fullscreen modals in 2025?
1 Answer
First off, you might want to reconsider using fullscreen modals. In most cases, they're not the best option. Modals should only be used when you absolutely need to preserve the current UI state while gathering additional info. For many mobile apps, it's often better to design a user-friendly interface without relying on modals. If you have to use them, try using the native `` element instead since it’s designed for this kind of purpose. Lastly, consider switching to dvh units instead of relying solely on fixed dimensions for modals.
Thanks for the insights! If I can't resolve the modal issues, I might just move forms to separate pages. But I found a problem with the example you shared—the body scroll isn't locked. If the modal has longer content, it lets you scroll the background, which isn't ideal. I found that using the body-scroll-lock library helps with this issue, but I'm curious about how it works.