1

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

Moe Habib
  • 13
  • 1
  • 4

3 Answers3

0

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?

abigwonderful
  • 1,797
  • 1
  • 12
  • 10
0

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.

pep1439
  • 35
  • 7
0

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.

partypete25
  • 4,353
  • 1
  • 17
  • 16
  • Any idea on how to fix it? or alternatives – Moe Habib May 23 '16 at 04:37
  • Well you are only concerned with changes in width, not height, so maybe you only need to call the function toggleMs() when the width has changed. http://stackoverflow.com/questions/10750603/jquery-detect-a-window-width-change-but-not-a-height-change – partypete25 May 23 '16 at 04:41