Input field iOS Safari bug — Can't type in any text

Question

I have a custom styled text input in a form on a page.

It's working as expected on desktop, Android, iOS Chrome, but sometimes in iOS Safari when typing into the box, no text enters, even though the field has focus and the cursor is flashing (doesn't happen very often, but seems to happen all the time for some users).

The form code is very standard, (copied straight from Mailchimp)

<form action="[mailchimp subscribe url]" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <div id="mc_embed_signup_scroll">
                    <input type="email" value="" placeholder="Email" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
                    <input type="submit" value="REQUEST INVITE" name="subscribe" id="mc-embedded-subscribe" class="button">
                    <div id="mc_embed_signup_scroll">
                    <div style="position: absolute; left: -5000px;"><input type="text" name="b_e563c0e6b5344e25de276c14f_5e5c7a08a6" tabindex="-1" value=""></div>
                </div>
            </form>

The custom CSS is:

input.email, .button {
    outline: none;
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    width: 240px;
    padding: 12px 16px;
    background-color: rgba(255,255,255,0.1);
    margin: 0;
    vertical-align: middle;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-family: 'Calibre Medium';
    color: white !important;
    opacity: 1;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}


::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-placeholder, input.email, .button {
    color: white !important;
    transition: all 0.15s;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -ms-transition: all 0.15s;
    -o-transition: all 0.15s;
}

Has anyone else seen this before?

I'm using flexbox and there is an animated SVG on the page, which I know sometimes causes unusual behavior in iOS Safari...

Answer 1

input { -webkit-user-select:text;}

this will solve the issue.

Answer 2

Browser specific css rules for text input field

input {
    -webkit-user-select: text; /* Chrome, Opera, Safari */
    -moz-user-select: text; /* Firefox 2+ */
    -ms-user-select: text; /* IE 10+ */
    user-select: text; /* Standard syntax */
}