very low keyboard response on web page using tablet

We have the following home page: When using a tablet, specifically an Android, the page comes up fine, but trying to type login ID and password is extraordinarily slow with the user waiting many seconds between letter. Other website, such as yahoo, respond quickly. This must be something on the tablet. The webpage is not doing anything special for mobile devices except not loading the slideshow.

Should it do something special for mobile devices? Any idea why it is so slow with keyboard interaction?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Looking at the site, there is a function that rotates through several pictures, and appears to be continually updating the page.  This is likely slowing down the tablet's browser significantly.  On a PC it would be able to handle this because most major web browsers are multi-threaded and would put that processing on a different thread.  However on the tablet the browser is much less advanced and has to keep switching context to handle the picture updates while you type in the box.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Step 1: Validate

Start by attacking these errors.  Fixing one, may cascade and fix others.  I can't really see anything else.  

If you can provide a demo username and password we can look what is going on in the log in phase.  Please don't make us register though.  Just provide a demo account.

Thank you.
jmarkfoleyAuthor Commented:
sentner: >  there is a function that rotates through several pictures,  ...

Yes, I thought that was the problem, but I did disable the for mobiles (smart phone, tablet) and it didn't help. Are you trying to access the site with a mobile device? It should only display one picture in this case.

Scott Fell (padas): Can't really provide a demo account, but the problem occurs *while* trying to type in an account ID -- it doesn't have to be valid.

In fact, this appears to only happen with a Samsung Android tablet. My Samsung Android smart phone has no problem.

I'll investigate the validity problems -- and try other mobile devices.
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The issue is easier to see with just the form.

1) Use form controls such as <input>
<input type="text" placeholder="Login ID">

Open in new window

2) Use buttons for buttons.

3) Validate your code.
Just this bit below is not valid.

4) Avoid absolute positioning.

5) Make the page responsive so you don't have to "zoom in"

6) Avoid inline styles.  Keep html separate from css.
<!DOCTYPE html>
  <meta charset="utf-8">
<form name="memberLogin" method="post" onsubmit="return submitLogin()" action="index.jsp">
	<input type=hidden name=logout>
	  <div style="position: relative">
      	    <img class="login" src="images/user_icon.png"><input type=text class="login"  autocomplete="off"
      	      tabindex="1" onfocus="loginFocus('idPrompt')" onblur="loginBlur('idPrompt',this)"
      	      autocomplete="off" name=logId size="10" maxlength=60 value=""/>

	    <div id="idPrompt" style="position: absolute; top: 5px; left: 25px; font-size: 12pt; color: gray">
	      login id

	    <div style="position: absolute; top: 1px; left: 146px">
	      <input id="subBtn" type="image" SRC="images/login.png"  style="height: 52px; border: 0" 
	         onmouseout="this.src='images/login.png';" />

	    <!--div style="position: absolute; top: 1px; left: 146px">
	      <input id="subBtn" type="submit" SRC="images/login.png"  style="height: 52px; border: 0" 
	         onmouseout="this.src='images/login.png';'auto'" />

	    <div style="position: absolute; top: -2px; left: 141px">
	      <img style="height: 56px" src="images/login_fancy.png">

	    <div style="font-size: 11pt; position: absolute; top: 5px; left: 215px; width: 245px;">
	      <b>To register</b>, <i>or</i> if you have forgotten your password
	      <a href="password.jsp">click here</a>.

	    <div id="pwPrompt" style="position: absolute; top: 30px; left: 25px; font-size: 12pt; color: gray">

    	  <div style="margin-top: 2px; clear: both">
      	    <img class="login" style="height: 22px; border-bottom: 1px solid rgb(237,238,241)" 
      	      src="images/user_lock.png"><input type=password class="login" tabindex="2"
      	      onfocus="loginFocus('pwPrompt')" onblur="loginBlur('pwPrompt',this)"
      	    name=password size="10"/>



Open in new window

jmarkfoleyAuthor Commented:
I've revised the html to validate as HTML5 with only 3 innocuous errors. I thought perhaps the 'autocomplete' attribute on the <input> tags was not working because docs say it is an HTML5 attribute. Nevertheless, that didn't help. I also turned of the tablet's form completion and word suggestion features. No matter what, there is a delay of about 1 second after tapping a character before it shows.

Interestingly, I get the same delay when typing in a new URL in the address bar. I do not see this problem on other websites on the same tablet. Hmmm, could it be the https versus http?

As to your other suggestions, largely not practical:

> The issue is easier to see with just the form.

I went there, but I don't really know what I'm looking at or supposed to do. The form on the right panel does not seem to take input.

> 1) Use form controls such as <input>
> <input type="text" placeholder="Login ID">
Not quite sure what you're suggesting here. Don't really see that the "placeholder" attribute is needed, if that's what your suggesting.
> 2) Use buttons for buttons.

Web designer designed use of images. What can I say. Still, this should not account for slow typematic.

> 3) Validate your code.
 > Just this bit below is not valid.


> 4) Avoid absolute positioning.

Don't really know how I would position images and DIVs absolutely without that. Again, not a problem on other mobile devices.

> 5) Make the page responsive so you don't have to "zoom in"

Not sure what you mean for me to do here.

> 6) Avoid inline styles.  Keep html separate from css.

Well, I'm not going to create classes for all the in-line styles. I'm skeptical that would speed things up and it would be a lot of work for the experiment.


This page works fine on other mobile devices such as my Samsung Charge. It works fine, no keyboard delay, on this tablet for other sites including sites I've developed using in-line styles and absolute positioning.

Most puzzling, there is the same keyboard delay when typing a URL into the address line on this tablet when on this site, but no delay in the address bar when on other sites. I don't see how the browser's address line would be affected by the current page, unless the current page was constantly refreshing or loading, which I don't believe it is.

Browser User Agent for Samsung Galaxy 10.1 tablet:

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; GT-P5113 Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

Browser User Agent for Samsung Charge smart phone:

Mozilla/5.0 (Linux; U; Android 2.3.6; en-us; SCH-I510 4G Build/FP8) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The jsbin link is your exact code without the css.  Try surfing to just the view page and it is very difficult to bring up the keyboard on one of the form inputs.    This is will not submit because I did not load your js.  

Now surf to a plain old form and notice that your keyboard comes right up.  

The only purpose is to point out some issues in the code.   You don't have to take things literally like using a placholder or not.   But you can see the speed difference when the form element is not being reconfigured.

Best of luck!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jmarkfoleyAuthor Commented:
Scott Fell (padas): I will try your ideas as time permits. Meanwhile, I checked this webpage with various other mobile devices: Andriod smart phone, iPad, iPhone and others and none of them have a problem with this page; only the Android Galaxy tablet. I need to back-burner this for a while.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Responsive Web

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.