iOS issue with HTML5 Mobile Responsive Site Using Bootstrap Foundation and .Net

iOS7 and Safari are slow to respond when selecting <input> field and submit <button>.  iOS6 and iOS4 are fine.

We are currently developing a responsive Bootstrap site using .Net.  We are in the QA process for a few pages.  Ever since the deployment of iOS 7 there is a significant time delay when interfacing with the page forms.  

It takes 7 seconds for an <input> field to respond and the (cursor to flash within field), and 35 seconds for a Search <button> to submit query.

We do have one form where there is NO delay when touching an <input> or <button> field in iOS7.  This happens to occur on a form that happens to be a plain Bootstrap modal “Contact Us.”   This may be a fluke.  There is one other plain Bootstrap Modal where delays do occur (Forgot Password Modal).  

We documented the various scenarios where delays occur:  http://screencast.com/t/HnBMaQAiDO

Behavior Note:  The delay only happens on the first instance where that type of field is engaged; once an <input> or <button> on a page has been used and user has not left the page, activating other fields in the form is immediate.
PAEWINSAsked:
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.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you using bootstrap2 or 3?

Have you checked on the desktop that there are no errors using http://validator.w3.org?

Have you checked in chrome/firbug/safari console for any js errors or missing file errors?

Are you using compressed files?

Are you using ajax to load anything?

Does it take time to load on the desktop browser as well?

Do you have a test link we can look at?
0
PAEWINSAuthor Commented:
Are you using bootstrap2 or 3?  
Bootstrap2

Have you checked on the desktop that there are no errors using http://validator.w3.org?
We had not checked...until now.  We had set  autocorrect="off" in the <input> field.  Is it not allowed any more?


Have you checked in chrome/firbug/safari console for any js errors or missing file errors?
Yes, there are many.  In all.css and there is a missing ";" before statement in bootstrap-formhelpers-datepicker.js which originally came from Vincent LaManna's plugin for Bootstrap. There are no missing files


Are you using compressed files?
Yes on m.firstteam.com     No on stgft50.firstteam.com


Are you using ajax to load anything?  
YES


Does it take time to load on the desktop browser as well?  
No


Do you have a test link we can look at?  
Yes  stgft50.firstteam.com
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
PAEWINS, I am sorry, I must have missed your last post. Thank you for your update and links. I will be able to come back to this later today.  Although with the message that just went out, there may be others that can get to this faster.
0
Determine the Perfect Price for Your IT Services

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

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Which is the link to look at? http://m.firstteam.com/ or http://stgft50.firstteam.com

If the "m" is for mobile, you should only need to use one version of the site as that is what using responsive @media queries is meant for.  You will design your phone, tablet and desktop screens on the same page.

Probably a good idea to switch to bootstrap3 especially if you are just starting out.  You will need to change your css, it is not a matter of switching out js files.

Take care of errors. I saw some on the m site.
0
PAEWINSAuthor Commented:
Thank you for your response.  Actually, we haven't resolved the 7 second delay, but are making progress.  

In regard to 'm' mobile site, we want to get the mobile site out ASAP and for now are focusing on 320 and 480 media query layouts.  We are also going live with only a portion of our web site pages.  

Once we get all the pages converted we will retire 'm' subdomain.

Thanks for pointing out errors and Bootstrap 3 option.  We want to go to 3, but again, do not want to delay any further the release of the mobile site.  Phase 2 will be all about converting over to Bootstrap 3 before we create any more pages.
0
PAEWINSAuthor Commented:
We ended up finding a solution internally.  

We were having problems with Bootstrap Popovers in iOS 7 only.  By default, popovers load with page whether they are used or not.  Having one popover causes a 3.5 second delay, having two popovers caused a 7 second delay.  

Replacing popovers with modals fixed the situation.
0

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
PAEWINSAuthor Commented:
Worked out our own solution.
0
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
JavaScript

From novice to tech pro — start learning today.