Safari mobile bootstrap modal: cursor in input field is displayed in the wrong place

Question

I have a very simple boot method that is used to log in the user. Only two fields (email address and password). The problem is that when I run this modal file and click on the email field, the blinking text input cursor appears in the wrong place during input. It is located above the input field (see. First link). But if I click "done" on the keyboard and then click on the text box again, it looks fine (see the second link). If I close the modal for the first time and open it again, then the cursor will be fine. This is just the first time this modal.

http://i.imgur.com/L12NhYd.png

http://i.imgur.com/u5DSYhL.png

<div class="login-logo sign-in-options">
                        <div class="row">
                            <div class="col-md-12 column sign-in-fields">
                                <button class="close" aria-hidden="true" data-dismiss="modal" type="button">
                                    x
                                </button>
                                <p class="register-page-header">
                                    Please Login.
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 column sign-in-fields">
                                <input type="email" id="user-login-email" class="user-login-field" placeholder="Email" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 column sign-in-fields">
                                <input type="password" id="user-login-password" class="user-login-field" placeholder="Password" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 column sign-in-fields">
                                <a redirect="popup" onclick="displayIndexBAM(this);" class="become-member-link" href="#">Join</a>
                            </div>
                            <div class="col-md-6 column sign-in-fields">
                                <a href="#" redirect="popup" onclick="displayForgotPassword(this);" class="forgot-password">Forgot Password?</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="login-loading"><img src="img/loading_transparent_medium.gif" alt="Loading" class="login-popup-loading">
                            </div>
                        </div>
                        <div class="row">
                            <img alt="Login" class="login-button" redirect="popup" onclick="customerLogin(this);" src="img/login-button.png" />
                        </div>
                        <div class="row">
                            <div class="login-failure-message">An error occurred while trying to process your request. Please try again later.</div>
                        </div>
                        <div class="row">
                            <div class="login-failure-other-messages" style="display:none;"></div>
                        </div>
        </div>

CSS

#user-login-email, #user-login-password, .user-register-field {
border: 0 none;
border-radius: 5px;
padding: 10px;
width: 100%;

}

.notify-me input, #user-login-email, #user-login-password, .user-register-field, .user-forgot-field, .user-register-zipcode {
background-color: #E5E5E5;
box-shadow: none;
color: #000000;
display: block;
float: left;
margin-top: 5px;

}

BootStrap 3