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.
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.
ASKER
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-date
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
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-date
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
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.
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.
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.
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Worked out our own solution.
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?