javascript - 本地主机和部署的 Rails/Bootstrap Navbar/jQuery 差异 (Heroku)

Question

我在开发基本 Rails 应用程序时遇到问题。我已经实现了 Twitter Bootstrap 及其响应式导航栏。当页面加载到移动屏幕上时，导航栏应按照设计向下滑动并向上滑动。我试图找出为什么某些场景会使 jQuery 动画出现故障且无法使用。我想确保这个问题不会在部署中显现出来，因为它非常烦人。

我的场景是:

<小时/>

本地主机上的开发服务器

Chrome (17.0.963.83)

• 动画效果很好。
• 开发者工具没有问题

火狐浏览器 (7.0.1)

• 动画出现问题。

• Firebug 显示了

  中发生的 3 个步骤过程

  `<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>`
  

iPhone 4 和 iPhone 模拟器上的 Safari

• 动画出现问题。
• 显然也是 3 个步骤的过程。

<小时/>

部署在 Heroku 上

Chrome (17.0.963.83)

• 工作正常

火狐浏览器 (7.0.1)

• 工作正常

iPhone 4 和 iPhone 模拟器上的 Safari

• 工作正常

<小时/>

根据要求...

application.js - 我调用脚本的地方

//= 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)

<小时/>

JSFiddle with my basic code

<小时/>

bootstrap-collapse.js

我认为其中的某些因素可能会导致问题，但我不确定。

!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 );

Answer 1

您在本地使用 RVM 吗？如果您是 - 尝试为您的应用程序设置一个干净的 gemset 并再次运行捆绑安装。

这样您就会知道您使用的版本与 Heroku 部署中的版本完全相同。

如果这不能解决您的问题，则 Bootstrap 代码本身可能存在错误 - 尝试在 Bootstrap 问题年龄上提出问题。 (或者至少搜索现有的问题)

按照评论中的建议(以及 future 的谷歌用户...) - 检查您的编译资源。一旦您确保运行相同的 gem 版本，请确保引用完全相同的 Assets 文件。删除 public 文件夹中的所有预编译资源，并更改 application.rb 中的 config.assets.enabled = true。

这对于 Heroku 部署尤其重要。