Can't enter form data on chrome mobile

Question

I'm working on a mobile-first webapp (Ruby on Rails 3 w/ Zurb Foundation 5) that has a form on the bottom part of the screen with three sections:

• File upload button
• Text input field
• Submit button

When using Google Chrome, I encounter bugs when I try to use the text input field.

• On iOS, the virtual keyboard pops up, but typing on it does nothing. Users have to click on the text field a second time to get the field to focus
• On Android, it's worse: after a click the keyboard pops up and then slides away again. Meanwhile the cursor is flashing in the text field.

Here is the code, any help would be much appreciated.

<form accept-charset="UTF-8" action="/posts" class="new_post" enctype="multipart/form-data" id="new_post" method="post">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="&#x2713;" />
        <input name="authenticity_token" type="hidden" value="i9+Pjr1hPjTH8/MzPI0Y4+o0qYvS+C/GJcOR5wht7nQ=" />
    </div>
    <div class="row collapse action">
        <div class="small-2 columns">
            <input id="post_pic" name="post[pic]" type="file" />
        </div>
        <div class="small-8 columns">
            <input id="post_message" name="post[message]" placeholder="What&#x27;s going on?" size="30" type="text" />
        </div>
        <div class="small-2 columns">
            <input class="postfix radius button action-post" name="commit" type="submit" value="Post" />
        </div>
    </div>

</form>

EDIT: found the CSS class that's causing the issue, but don't know how to fix it yet:

.action {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding-top: 20px;
}

Answer 1

Chrome mobile's virtual keyboard is likely conflicting with the positioning of your form items that are fixed flushed to the bottom.

There are a lot of threads stating buggy behavior when fixing elements flush to the bottom. You should move the form elsewhere.