How to keep Memberstack paywall email input visible above keyboard on iOS devices?
Hey guys, we have a problem on paywall banner, it's metered paywall and slide up when 30% scrolled.
It's normally should be a Webflow issue, but i stil wanted to ask if there is any way to solve it. It contains memberstack attribution as well.
Problem: On mobile when iPhone user try to click email field, it's not floating over keyboard, instead, it falls down and the user doesn't know what is typing. It doesn't happen on android phone.
Step to reproduce: open this link on mobile, and try to click email field when popup reveals: https://www.scrolli.co/global/story/wakhan-corridor-where-geopolitics-meets-black-ice
I swear I've tried everything to fix but no luck.
Comments
5 comments
That's super weird 🤔 Not sure why it's trying to focus the email field below the keyboard... do you have a Webflow read only link we could look at?
I also don't get it, here is ready only link: https://preview.webflow.com/preview/scrollistudio?utm_medium=preview_link&utm_source=d[…]o&preview=7a1fd85c6659d30e4c7ea7de1cb93faa&workflow=preview
If your Webflow metered paywall's email input field won't focus on iPhone (but works on Android), the issue is likely that the element lacks sufficient bottom padding. When users tap the email field, the phone's keyboard opens but can't properly focus the input because there's no scrollable space below it. Try adding additional bottom padding to the paywall element—this allows the page to scroll and gives the phone enough viewport space to properly focus the input field and display the keyboard correctly.
https://www.loom.com/share/3c79866fba184fca86c27b8d0742f5f6
That's great! Thanks Duncan for the video, i like you casual summer-vibe videos. could you please try again? i deployed new version
To fix the iPhone keyboard focus issue on your Webflow metered paywall, add bottom padding directly inside the paywall element itself—specifically below the "Become Member" button. This ensures that adequate padding is applied to the entire container. The problem occurs because the current element doesn't have any extra spacing at the bottom, which prevents the phone from having enough viewport space to properly focus the email input when the keyboard opens. By adding this padding within the element (rather than trying to add it elsewhere), you guarantee that the input field will have sufficient scrollable space below it, allowing the keyboard to appear correctly and users to successfully interact with the email field on iOS devices.
https://www.loom.com/share/b6357f2a14cd49ee8207cad29bd9a1a4
Please sign in to leave a comment.