Website Landing page on mobile device, keyboard issue

Question

I have a small issue on a landing page that I just created. It works great on desktop browsers, However, on mobile device, when trying to type email in notify field the keyboard pops up for half a second and disappears. Any suggestions?

Website: www.imgr8.com

Answer 1

It's a shot in the dark, but what are the chances that the p.copyright tag that has an absolute position at the bottom of the page could be interfering? What happens if you remove that element entirely?

Answer 2

Your this line causing problem:

onfocus="this.placeholder = ''"

Change above with something else like:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Hope it will help.

Answer 3

It's to do with a resize event you have. It gets triggered once the keyboard appears on screen.

$(window).resize(function(){
    toggleMs(); // Checking to destroy or build when we resize browser
});

You can demo this on your browser window. Resize your window so that it is small like a mobile then refresh your page. Click in the text input and then resize your screen from the bottom and you'll notice the cursor has not remained focused in the input.