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...

Ever get this figured out? I am experiencing a similar issue. — Garrett, Oct 14 '15 at 23:31
Hey @GarrettWills, I did a hack where I set the field to display none, then back to display '' after a 0sec timeout. Pretty nasty, but it worked. — Jack Wild, Oct 15 '15 at 09:04

score 52 · Accepted Answer · answered Jul 24 '18 at 11:43

52

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

this will solve the issue.

answered Jul 24 '18 at 11:43

sabu

636
6
4

1

Why does this solve the issue? Can you explain, please? That would make it easier to understand. Thanks! – CodeF0x Jul 24 '18 at 13:10
2

by default in safari browser, user-select:text” does not work thats why we need to provide browser specific -webkit-user-select:text property. hope it is clear@CodeF0x – sabu Jul 30 '18 at 11:55
1

On an additional note you may want to include textareas too. So the code will be like this: `input, textarea { -webkit-user-select:text;}` – Diego Fortes Oct 17 '20 at 23:22
Mac Catalyst UPDATE: dismissKeyboard gesture trick must be excluded – Massimo Pavanel May 18 '21 at 07:00
Wow, 2021. Confirmed still a valid fix for iOS. – Ben Racicot Jun 11 '21 at 16:34
@BenRacicot Confirmed - just solved my day. – easwee Nov 02 '21 at 13:12
2022 and still fixing this issue. Just saved the day for me. Well done +1 – iCollect.it Ltd Aug 29 '22 at 18:25
Apple can't keep getting away with this. – jrcamatog Nov 15 '22 at 13:44

score 9 · Answer 2 · answered May 15 '20 at 20:44

9

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 */
}

answered May 15 '20 at 20:44

jasonleonhard

12,047
89
66

score 0 · Answer 3 · edited Mar 22 '18 at 08:08

0

Your div tag should be display-block and clear both.

#mc_embed_signup_scroll { display:block; }

edited Mar 22 '18 at 08:08

Mohammad Usman

37,952
20
92
95

answered Mar 22 '18 at 07:45

Amarjeet

1
1

score 0 · Answer 4 · answered Aug 30 '22 at 19:47

0

FYI it should be applied to textarea elements as well as basic input elements as I found the same problem with textarea:

e.g.

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

answered Aug 30 '22 at 19:47

iCollect.it Ltd

92,391
25
181
202

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

4 Answers4

Browser specific css rules for text input field

Linked