On mobile, why is my cursor not staying within the form input field?

Design help General
1

I have a form on my website for quick sign ups. On mobile, using updated iOS and tried on updated Safari and updated Chrome, my cursor is acting funny on the form. Sometimes if I’m lucky, the cursor will stay within the input field, but most time the cursor is outside the input field, the cursor becomes scrollable, and sometimes you can’t see the cursor at all.

If you want to view on your mobile, you can go to www.podpod.webflow.io

I’ve uploaded some photos, but here is a screen recording of the input field actually scrolling, too.

Here is my view-only link. The form pops up from the very last button on the page.

I have tried changing a bunch of things, but am hoping for some help as I have been unsuccessful. Thank you!

IMG_3341
IMG_33411242×2208 199 KB
IMG_3340
IMG_33401242×2208 199 KB

2

@samliew I saw you comment and suggest some fixes for an issue like this. I tried the suggestions, but not able to replicate the same design as it is now. Any suggestions for me? I would really appreciate it.

3

@myonke sorry, I do not have a resolution for this issue

4

@samliew would there be a way to create a relative for the modal that only contains the modal, and then fix this relative to the top of the page at 100vh. Then, when you click your button to open the modal, it would be within the full page relative that is already taking up the entire screen? I tried this, but couldn’t get the z-index working correctly. I could open the modal and it would take up the entire screen, but some content remained over it. Just trying to think of a creative solution…

5

Hi! I’ve found a solution.

  1. Create a tranparent modal section with FORM and set position absolute.
  2. Create a background modal section with color opacity and set position fixed.
  3. Create a button with an interaction to show when clicked this 2 elements.
  4. Set an anchor link on button to the transparent modal section with form

You can see here:

https://preview.webflow.com/preview/ios-mobile-field-issue?preview=c1fc81541b4d66edd69aa786e4d7878e

6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.