I’m having an issue while developing a basic Rails application. I’ve implemented Twitter Bootstrap and its responsive navbar. When the page is loaded on mobile screens the navbar should slide down and slide back up as designed. I’m trying to figure out why certain scenarios are making the jQuery animation glitchy and unusable. I want to make sure that this problem won’t manifest in deployment and because it’s quite annoying.
My scenarios are:
Development server on localhost
Chrome (17.0.963.83)
- Animation works fine.
- No issues in Developer Tools
Firefox (7.0.1)
- Animation glitchy.
-
Firebug shows a 3 step process happening in
`<div class="nav-collapse" style="height: auto;">...</div>` `<div class="nav-collapse collapse" style="height: 0px;">...</div>` `<div class="nav-collapse" style="height: auto;">...</div>`
Safari on iPhone 4 and iPhone Simulator
- Animation glitchy.
- Apparent 3 step process as well.
Deployed on Heroku
Chrome (17.0.963.83)
- Works fine
Firefox (7.0.1)
- Works fine
Safari on iPhone 4 and iPhone Simulator
- Works fine
As requested…
application.js – Where I’m calling the scripts
//= require jquery
//= require jquery_ujs
//= require bootstrap-transition.js
//= require bootstrap-alert.js
//= require bootstrap-button.js
//= require bootstrap-carousel.js
//= require bootstrap-collapse.js
//= require bootstrap-dropdown.js
//= require bootstrap-modal.js
//= require bootstrap-tooltip.js
//= require bootstrap-scrollspy.js
//= require bootstrap-tab.js
//= require bootstrap-typeahead.js
//= require_tree .
Gemfile.lock
GEM
remote: https://rubygems.org/
specs:
actionmailer (3.2.2)
actionpack (= 3.2.2)
mail (~> 2.4.0)
actionpack (3.2.2)
activemodel (= 3.2.2)
activesupport (= 3.2.2)
builder (~> 3.0.0)
erubis (~> 2.7.0)
journey (~> 1.0.1)
rack (~> 1.4.0)
rack-cache (~> 1.1)
rack-test (~> 0.6.1)
sprockets (~> 2.1.2)
activemodel (3.2.2)
activesupport (= 3.2.2)
builder (~> 3.0.0)
activerecord (3.2.2)
activemodel (= 3.2.2)
activesupport (= 3.2.2)
arel (~> 3.0.2)
tzinfo (~> 0.3.29)
activeresource (3.2.2)
activemodel (= 3.2.2)
activesupport (= 3.2.2)
activesupport (3.2.2)
i18n (~> 0.6)
multi_json (~> 1.0)
arel (3.0.2)
builder (3.0.0)
coffee-rails (3.2.2)
coffee-script (>= 2.2.0)
railties (~> 3.2.0)
coffee-script (2.2.0)
coffee-script-source
execjs
coffee-script-source (1.2.0)
erubis (2.7.0)
execjs (1.3.0)
multi_json (~> 1.0)
hike (1.2.1)
i18n (0.6.0)
journey (1.0.3)
jquery-rails (2.0.1)
railties (>= 3.2.0, < 5.0)
thor (~> 0.14)
json (1.6.5)
mail (2.4.4)
i18n (>= 0.4.0)
mime-types (~> 1.16)
treetop (~> 1.4.8)
mime-types (1.17.2)
multi_json (1.1.0)
mysql2 (0.3.11)
pg (0.13.2)
polyglot (0.3.3)
rack (1.4.1)
rack-cache (1.2)
rack (>= 0.4)
rack-ssl (1.3.2)
rack
rack-test (0.6.1)
rack (>= 1.0)
rails (3.2.2)
actionmailer (= 3.2.2)
actionpack (= 3.2.2)
activerecord (= 3.2.2)
activeresource (= 3.2.2)
activesupport (= 3.2.2)
bundler (~> 1.0)
railties (= 3.2.2)
railties (3.2.2)
actionpack (= 3.2.2)
activesupport (= 3.2.2)
rack-ssl (~> 1.3.2)
rake (>= 0.8.7)
rdoc (~> 3.4)
thor (~> 0.14.6)
rake (0.9.2.2)
rdoc (3.12)
json (~> 1.4)
sass (3.1.15)
sass-rails (3.2.4)
railties (~> 3.2.0)
sass (>= 3.1.10)
tilt (~> 1.3)
sprockets (2.1.2)
hike (~> 1.2)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
thor (0.14.6)
tilt (1.3.3)
treetop (1.4.10)
polyglot
polyglot (>= 0.3.1)
tzinfo (0.3.32)
uglifier (1.2.3)
execjs (>= 0.3.0)
multi_json (>= 1.0.2)
PLATFORMS
ruby
DEPENDENCIES
coffee-rails (~> 3.2.1)
jquery-rails
json
mysql2
pg
rails (= 3.2.2)
sass-rails (~> 3.2.3)
uglifier (>= 1.0.3)
bootstrap-collapse.js
I think that something in this could be causing the issue but I’m not sure.
!function( $ ){
"use strict"
var Collapse = function ( element, options ) {
this.$element = $(element)
this.options = $.extend({}, $.fn.collapse.defaults, options)
if (this.options["parent"]) {
this.$parent = $(this.options["parent"])
}
this.options.toggle && this.toggle()
}
Collapse.prototype = {
constructor: Collapse
, dimension: function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
, show: function () {
var dimension = this.dimension()
, scroll = $.camelCase(['scroll', dimension].join('-'))
, actives = this.$parent && this.$parent.find('.in')
, hasData
if (actives && actives.length) {
hasData = actives.data('collapse')
actives.collapse('hide')
hasData || actives.data('collapse', null)
}
this.$element[dimension](0)
this.transition('addClass', 'show', 'shown')
this.$element[dimension](this.$element[0][scroll])
}
, hide: function () {
var dimension = this.dimension()
this.reset(this.$element[dimension]())
this.transition('removeClass', 'hide', 'hidden')
this.$element[dimension](0)
}
, reset: function ( size ) {
var dimension = this.dimension()
this.$element
.removeClass('collapse')
[dimension](size || 'auto')
[0].offsetWidth
this.$element[size ? 'addClass' : 'removeClass']('collapse')
return this
}
, transition: function ( method, startEvent, completeEvent ) {
var that = this
, complete = function () {
if (startEvent == 'show') that.reset()
that.$element.trigger(completeEvent)
}
this.$element
.trigger(startEvent)
[method]('in')
$.support.transition && this.$element.hasClass('collapse') ?
this.$element.one($.support.transition.end, complete) :
complete()
}
, toggle: function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
}
/* COLLAPSIBLE PLUGIN DEFINITION
* ============================== */
$.fn.collapse = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('collapse')
, options = typeof option == 'object' && option
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.collapse.defaults = {
toggle: true
}
$.fn.collapse.Constructor = Collapse
/* COLLAPSIBLE DATA-API
* ==================== */
$(function () {
$('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) {
var $this = $(this), href
, target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
, option = $(target).data('collapse') ? 'toggle' : $this.data()
$(target).collapse(option)
})
})
}( window.jQuery );
Are you using RVM locally? If you are – try setting up a clean gemset for your app and running bundle install again.
That way you’ll know that you’re using the exact same versions as on your heroku deployment.
If that doesn’t fix your problem, then there might be a bug in the bootstrap code itself – try raising an issue on the bootstrap issues age. (Or search the existing issues at least)As suggested in the comments (and for future googlers…) – Check your compiled assets. Once you’ve ensured that you’re running the same gem versions, make sure you’re referencing the exact same asset files. Delete all of the precompiled assets in the public folder and change
config.assets.enabled = trueinapplication.rb.This is especially important on Heroku deployments.