Delay when entering text in a CSS form field on mobile

icecom4
icecom4 used Ask the Experts™
on
I am building a website.  I noticed that when entering text in the contact form from mobile phones there is this odd delay, anywhere from 1-10 seconds before the letters or words I typed appears.  On my computer and laptop it is fine, no lag.  On my iphones 10 and 7, I tried safari, chrome, and edge...they all do it.  

It's a fairly straight forward contact form, uses php on the back end.  The server resources are good. Internet connection is fast, just wondering what would possibly cause this lag only on mobile.

Not really sure where to start.  Should I be looking for in CSS config?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
The server resources are good. Internet connection is fast,
None of these are in play once the form has loaded.
If the form is displaying then it has already been loaded and parsed by the browser.

If there is a delay then it is something local

1. Does this happen on other sites?
2. Can the effect be replicated on other phones or is it just yours?
3. Does the page run any JavaScript - handlers that monitor form input.
4. Does the response improve after a time period? In other words - is this something experienced
    a) The first time data is entered in the field - if you exit the field and return does the problem persist
    b) Within a certain period of page load - if you leave it for a few seconds does the problem still occur.
5. Does this happen on other types of phone (Android)
6. Does this happen in phone emulators?
Do you have a link that we can test with
Jim RiddlesPrepress/OMS Specialist

Commented:
One key question would be if you are using any JavaScript libraries in your site, and if so, which ones?  If could be that you have multiple libraries that are both operating on your input fields.  Either that, or they are large libraries that are taking a long time to load on the mobile network, so the page can't respond until they are fully loaded.

Author

Commented:
Thanks for the responses.  

@ Julian
1.      No
2.      Yes, tested on 2 other iphones (7 and 10), however I did ask a dev to test and he said it does not happen on is iphone 10
3.      I don’t believe so, but looking into that…
4.      No, for me it will do the same thing if I return to the field 4 seconds later 4 mins or 4 hours, very constant
5.      I tested on a cheap $10 Alcatel android phone and no problems, form works fine
6.      I don’t know, what is a good phone emulator for ios?
7.      Link posted Below


Here is a link to the site you can view the source there and test what I mean filling out the contact form.  Click on Enter site>Request Quote to test the form

Below are all the Java scripts

   <!-- Java Script
   ================================================== --> 
   <script src="js/jquery-2.1.3.min.js"></script>
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">


<script type="text/javascript">
<!-- Popup window code for reduced sized windows -->
function newPopup(url) {
	popupWindow = window.open(
		url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>

<!-- // Cookies popup -->
<script type="text/javascript">
$(document).ready(function(){   
    setTimeout(function () {
        $("#cookieConsent").fadeIn(200);
     }, 4000);
    $("#closeCookieConsent, .cookieConsentOK").click(function() {
        $("#cookieConsent").fadeOut(200);
    }); 
}); 
</script>
   <!-- script for Loader delay
   ================================================== -->   
   <script
 	 src="https://code.jquery.com/jquery-3.3.1.js" crossorigin="anonymous"></script>
	<script src="js/modernizr.js"></script>
	<script src="js/pace.min.js"></script>

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Jim RiddlesPrepress/OMS Specialist

Commented:
One thing I see from a quick glance is that you are loading jQuery 2.1.3 on line 3, but then loading jQuery 3.3.1 on lines 30-31.  That could certainly be causing an unexpected issue.

Author

Commented:
I was concerned about that also. If I comment out 2.1 and use only that the page works the same but does not resolve the lag in contact form.  If I try to use only 3.3 the loader fails to transition to the home page, so it disables that function.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
There is quite a bit going on in these scripts.

Can you try this.

Comment out each script inclusion (one at a time) and see if the problem goes away on each exclusion. Debugging on a phone is a pain so what we need to do is change something to see what effect it has.
Disable the jQuery libraries one at time.
Then try main.js
Then pluggins.js

Make sure you do a hard refresh on each attempt to force a cache refresh.

Let's see if it is something in the Javascript and if so which script.

Author

Commented:
I was doing this all morning, disabled each script then cleaned the browser cache before testing again. the page still does it. did you load page on your phone? are you getting error?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I have an android phone - no issues.
Have you tried loading a plain HTML Form -
<!doctype html>
<html>
<head>
<title>Test page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<form name="contactForm" id="contactForm" method="POST" enctype="multipart/form-data" action="inc/sendEmail.php">
  <fieldset>
    <div class="form-field">
      <input name="contactName" type="text" id="contactName" placeholder="Name:" value="" minlength="2" required="" autocomplete="new-password">
    </div>
    <div class="form-field">
      <input name="contactEmail" type="email" id="contactEmail" placeholder="Email Address:" value="" required="" autocomplete="new-password">
    </div>
    <div class="form-field">
      <input name="contactSubject" type="text" id="contactSubject" placeholder="Subject:" value="" autocomplete="new-password">
    </div>
    <div class="form-field">
      <textarea name="contactMessage" id="contactMessage" placeholder="Project Details:" rows="10" cols="50" minlength="20" required="" autocomplete="new-password"></textarea>
    </div>
    <div class="form-field">
      <input name="contentPages" type="text" id="contentPages" placeholder="How much content:" value="" required="" autocomplete="new-password">
    </div>
    <div class="form-field">
      <input name="dueDate" type="text" id="dueDate" placeholder="Due Date: mm/dd/yyyy" value="" required="" autocomplete="new-password">
    </div>
    <div class="form-field" id="stateSelection" autocomplete="new-password">
      <span id="stateSelectionLabel">Attending School:&nbsp;&nbsp;</span>
      <select class="no-margin" name="State" type="text" id="State">
        <option value="N/A">N/A</option>
        <option value="Not a Student">Not a Student</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#modal-10" class="overlay;"> why ask this?</a>
    </div>
    <div class="form-field">
      <input name="Coupon" type="text" id="Coupon" placeholder="Discount Code(s):" value="" autocomplete="new-password">
    </div>
    <br>
    <br>
    <div class="form-field">
      <input type="file" name="file" class="custom-file-input">
    </div>
    <div class="form-field">
      <input type="checkbox" name="terms" value="Yes" required=""> 
      <span>
        I agree with these<a href="JavaScript:newPopup('./Terms.html');"> terms</a>
        <div class="item-wrap">
          <input type="checkbox" name="partner" value="Yes"> <span>If busy, connect me with &nbsp;<a href="#modal-08" class="overlay;">partner</a>
          </span>
        </div>
        <div class="item-wrap">
          <input type="checkbox" name="incognito" value="Yes"> <span>I wish to be<a href="#modal-09" class="overlay;"> incognito</a>
          </span>
        </div>
        <div class="form-field">
          <input type="submit" class="submitForm" name="submitForm" value="Submit">
          <div id="submit-loader">
            <div class="text-loader">Sending...</div>
            <div class="s-loader">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
        </div>
      </span>
    </div>
  </fieldset>
  <label class="ohnohoney" for="name"></label>
  <input class="ohnohoney" autocomplete="off" type="text" id="name" name="name" placeholder="Your name here">
  <label class="ohnohoney" for="email"></label>
  <input class="ohnohoney" autocomplete="off" type="email" id="email" name="email" placeholder="Your e-mail here">
</form>
<body>
</html>

Open in new window

Put that in a page on its own just as it is - do you get the same effect?

Author

Commented:
No, I dont get the error when I do that.  Maybe I can make it a seperate page and load it using an iframe to the home page.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
What I would do is start with that page and incrementally add scripts / html until you get the problem.

Author

Commented:
I narrowed it down to this code below.  Its part of the anti-bot for the form so I dont want to disable it, maybe something needs tweaking.  

 <!-- Honeypot
	================================================== -->
	<!--<style>
	html, body {
		overflow-x:hidden;
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}
    .ohnohoney{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }
	.auto-style7 {
		color: #FA0003;
	}
	.auto-style9 {
		color: #C0C0C0;
	}
	.auto-style10 {
		color: #CCCCCC;
	}
	.owl-wrapper {
		overflow: hidden;
	}
	#stateSelection {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	#stateSelectionLabel {
	    float: left;
		font-family: "poppins-regular", sans-serif;
		font-size: 1.6rem;
		line-height: 3rem;
		margin-left: 16px;
	}
	.no-margin {
		margin: 0;
	}
	</style>-->

Open in new window

Jim RiddlesPrepress/OMS Specialist

Commented:
I highly doubt that CSS is the issue.  I'm not saying that it isn't...just that I find it unlikely.  If you can find the JavaScript that powers the anti-bot and disable it, then that would narrow it down to that code.  If it turns out that the anti-bot code is the issue, then we can look at it and see if there is anything that we can help with.

Unfortunately, I have an Android device, as well, so I can't really test it, either.

Author

Commented:
well i commented this out specifically and the problem went away. there is no java that powers the honey pot method. i will play with these values.

Author

Commented:
okay, its this very snippet.
 /*html, body {
		overflow-x:hidden;
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
	}*/

Open in new window


it was added to prevent my side from moving horizontally.  I uncommented it and now the weird issue where the text delay issue is gone.  Bizarre but true.
But now this poses a new problem, I cant have my side move horizontally.  I robbed Peter to pay Paul.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Can you narrow it down further? Comment each line.

Author

Commented:
its that overflow-x line
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
What happens if you take that line out - what is the impact (apart from fixing the problem)?

Have you tried adding this
 -webkit-overflow-scrolling: touch;

Open in new window

Some posts link the above with issues with overflow and scrolling - so it probably has no bearing here but I have learned not to second guess the idiosyncrasies of the web so no harm in trying.

Author

Commented:
I have learned not to second guess the idiosyncrasies
Well who would have known disabling a scroll function would cause strange input issues in a web form.  

But now this poses a new problem, I cant have my side move horizontally.  

Yes, actually
-webkit-overflow-scrolling: touch;

Open in new window

is already enabled.  In fact, that is needed for a carousel on my site "Services" to scroll horizontally, which is also why I needed the overflow-x line to disable the whole page from trying to scroll when we just want that one carousel.
But now we know, I can’t use that overflow-x line because I need my form to work for everyone, which is priority.  
What I may do is close this question since technically it is answered and then start a new question related to the scrolling directly.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial