bootstrap css bug on mobile

Hi all, the following link is to a work in progress website http://www.klima.co.nz/dev3/Benifits-FAQ

I have come across a bug with the data-toggle collapse action (only evident when viewed on ipad or other such mobile device). The bug can be seen on the accordion open and close action and the nav collapse button.

Essentially rather than smoothly do its thing I get an open, jerky close then open again.

I am sure it has to do with the collapse in, collapse, and collapsing styles.
Appreciate assistance as I cant see the wood for the trees.
Cheers,
N
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Scott Fell, EE MVEConnect With a Mentor DeveloperCommented:
I tested what you have in bare bones bootstrap 2 http://jsbin.com/jiliquvu/1/edit and then I took the sample from bootstrap 3 http://jsbin.com/sesotubu/1/edit and on my android tablet there was not a huge difference.  

The actual urls I  used were http://jsbin.com/jiliquvu/1/ and http://jsbin.com/sesotubu/1/ (adding the edit at the end of the url in jsbin shows you the html).

One thing to note on both of my samples as well as your own, none of the files are compressed.  I think that would have to do more with loading and not memory.
0
 
Scott Fell, EE MVEDeveloperCommented:
I am going to check this out on my tablet.  But first...

Is there a reason you are using the old version of bootstrap and not the newest?  I do think changing is good as the way things work is a lot better.  However, you do have to change your classes like span6 to col-md-6.

Beyond that, there are a few errors that can come into play.  http://validator.w3.org/check?uri=http%3A%2F%2Fwww.klima.co.nz%2Fdev3%2FBenifits-FAQ&charset=%28detect+automatically%29&doctype=Inline&group=0 It is a small amount of errors, but items that could make a difference.
 Line 44, Column 124: Bad value http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic|Fjalla+One for attribute href on element link: Illegal character in query: not a URL code point.
…?family=PT+Sans:400,700,400italic|Fjalla+One' rel='stylesheet' type='text/css'>
Syntax of IRI reference:
Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.
Error Line 94, Column 125: Element hgroup not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
…go.svg" alt="Klima logo"> </a> <hgroup><h1>Benifits - FAQ</h1><span><i class="…
Content model for element div:
Flow content.
Error Line 94, Column 125: The hgroup element is obsolete. To mark up subheadings, consider either just putting the subheading into a p element after the h1-h6 element containing the main heading, or else putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class="subheading" element with differentiated styling. To group headings and subheadings, alternative titles, or taglines, consider using the header or div elements.
…go.svg" alt="Klima logo"> </a> <hgroup><h1>Benifits - FAQ</h1><span><i class="…
¿
Error Line 210, Column 114: Bad value tooltip for attribute rel on element a: The string tooltip is not a registered keyword. The string tooltip is not an absolute URL.
…="" data-original-title="Tooltip ex.1">consectetuer adipiscing</a> elit, sed d…
Syntax of link type valid for <a> and <area>:
A whitespace-separated list of link types, with no duplicate keywords in the list. Each link type must be listed as allowed on <a> and <area> in the HTML specification, or must be listed as allowed on <a> and <area> on the Microformats wiki, or must be an absolute URL. You can register link types on the Microformats wiki yourself.
Syntax of absolute IRI:
An absolute URL. For example: http://example.org/hello, but not /hello. Spaces should be escaped as %20.
Error Line 210, Column 499: Bad value tooltip for attribute rel on element a: The string tooltip is not a registered keyword. The string tooltip is not an absolute URL.
…"#" rel="tooltip" title="Tooltip ex.2">vel illum dolore</a> eu feugiat nulla f…
Syntax of link type valid for <a> and <area>:
A whitespace-separated list of link types, with no duplicate keywords in the list. Each link type must be listed as allowed on <a> and <area> in the HTML specification, or must be listed as allowed on <a> and <area> on the Microformats wiki, or must be an absolute URL. You can register link types on the Microformats wiki yourself.
Syntax of absolute IRI:
An absolute URL. For example: http://example.org/hello, but not /hello. Spaces should be escaped as %20.
Error Line 217, Column 12: Stray end tag section.
  </section>

Open in new window

0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Yes, I have since changed to the newest version of bootstrap however the project shown in this question was started quite some time ago (prior to v3).
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Great. I'll take a closer look when I get back to work in the morning.
0
 
Scott Fell, EE MVEDeveloperCommented:
Neil, I use bootstrap a lot but have not used the accordion.  What I am seeing is even with my 2 tests with bare bones code, it is not as smooth.   The tests are slightly better than on your sample.
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Thanks for your time on this Scott, your examples led me to the solution which turned out to the the bootstrap.js file. I updated it and my issues vanished!
Cheers,
N
0
 
Scott Fell, EE MVEDeveloperCommented:
Great, what did you updated to?  A newer version or compressed?
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Newer.
I had expected a long battle this morning but it did the trick beautifully.
You made a good point earlier re compressing the css, js files etc. This I usually do at the back end of the project as I find its easier to work with the uncompressed versions.

The latest version of Bootstrap is fantastic and would have been my choice however at this 11th hour updating the entire project was not an option.
Cheers,
N
0
 
Scott Fell, EE MVEDeveloperCommented:
I do the same.  Although for libraries like bootstrap, I typically start with using compressed and use my own css and js uncompressed until I am ready.

Glad it worked.
0
All Courses

From novice to tech pro — start learning today.