Javascript 在Heroku上加载div文本时出现抖动，但在开发环境中效果良好

我正在为一个已经成为相当亲密朋友的客户开发一个网站，因此我正在努力为他完善一切（他可能会忽略这个问题，但这不是我想要做的工作）。该网站在开发环境中运行良好，但在Heroku上的（预）生产中，页面加载出现了令人不安的抖动（特别是在单击页面顶部的导航链接时），您可以通过访问Heroku URL看到：

有相当多的不同的SCS、HTML和JS文件正在加载，因此在这里复制它们是没有意义的，但下面是最有可能找到罪犯的代码部分：

产品。SCS

@import "bootstrap";

.row {
  margin-top: 25px;
}

.accordian {
  overflow: visible !important;
}

.accordian > div {
  background-color: #eaeaea !important;
  overflow: scroll !important;
}

.ui-state-focus { 
  outline: none;
}

.servicestext {
  overflow: scroll !important;
}

.paper-image {
  padding: 15px;
}

.text-box {
  background: #efefef;
  box-shadow: 5px 5px 2px #888888;
}

home.html.erb

<% provide(:title, "Products and Solutions") %>
<%= stylesheet_link_tag 'products' %>

    <div class="row">
        <div class="image-box image-left-box col-md-5"><%= image_tag("cogs-binary-shiny.jpg", class: "image", id: "paper-image") %></div>
        <div class="synopsis-text text-box col-md-6"><h1>Products and Solutions</h1>
          <p class="product-text">Simutronix offers multiple profit optimisations solutions, tailored
          to suit the needs of any business, large or small. From face to face consultancy,
          to bespoke optimisation solutions, to the off the shelf <em>SimutronX</em>, we have
          something to suit every business model.
          </p>
        </div>
    </div>  
    <div class="row">
      <div class=" text-box col-sm-5" id="services_accordian">
        <h2>Profit Optimisation; Cost Reduction; Services Streamlining</h2>
        <div class="accordion">
          <h3>Profit Optimisation</h3>
          <div class="accordian-title">
            <p>We can take your business and turn it from
            a loss making venture into a formula for success.
            We use cutting edge mathematical techniques
            derived from derivations of historical data
            processing methodologies created by some
            of the greatest minds in history.</p>
          </div>
          <h3>Cost Reduction</h3>
          <div class="accordian-title">
            <p>We can make sure every part of your
            business works properly with every other 
            part. From traditional, albeit two-dimensional, 
            sales and marketing synergies through 
            to a complete and holistic approach,
            seeing your entire company as a living,
            breathing organism in its own right. A
            moving, changing, <em>dynamic</em> body
            of ever differing elements that is far, 
            far more than the sum of its parts,
            and yet is always an expression of all 
            of its constituent elements.
           </p>
          </div>
          <h3>Services Streamlining</h3>
          <div class="accordian-title">
            <p>When your sales team are producing works of fantasy,
            often through no fault of their own, it can
            be difficult to know what specification to manufacture to.
            Of course, no-one entirely understands what the market will do
            next but you know that what you want, what your company
            absolutely needs is to be flexible while retaining its
            core ethos, its belief system and the markets that
            made it successful in the first place.</p>
            <p>That success may have come easier to start with,
            but if you're honest with yourself, you've found things
            becoming more difficult, more complex. You're sure
            you could break through to the next level, if only
            you could reliably model what's actually happening
            within your company and outside, in the wider world
            where you products, your services are being sold.
            And that's why sometimes you need those old-fashioned
            things, like maths, science, models and formulae,
            to get control back, and to really push things
            forward in exactly the way you have <em>always</em>
            been capable of.</p>
          </div>
        </div>
      </div>
      <div class="image-box image-right-box col-sm-6"><%= image_tag("new-small-statue.jpg", class: "image", id: "statue-image") %></div>
    </div>

    <div class="row">
      <div class="image-box image-left-box col-md-5"><%= image_tag("pen-hand-small.jpg", class: "image", id: "pen-image") %></div>
      <div class="copytext text-box col-md-6">
        <h2>Margin Improvement</h2>
        <p><em>Margin improvement is about making more profit by improving what you already do.</em> Cost engineering, better and sharper buying, pricing appropriately, discounting less and investing in equipment
        which will do more, quicker and with less man-hours expended. In conjunction with optimisation, the two can result in truly 
        startling profit improvements.</p>
       </div>
    </div>

如果有人能在这方面帮助我，我将不胜感激，因为我真的很想让客户的网站尽可能接近完美，他们一直很友好，理解，而且总体来说是一种工作的乐趣

抖动可以在以下gif中看到：

---

抖动也出现在Firefox中，但不太明显。

FWIW我没有看到抖动。你使用的是什么浏览器，你能创建错误的GIF吗？我在Windows10上使用Chrome。我将使用另一个浏览器进行测试，看看是否可以为您创建gif。将gif和Firefox测试结果添加到问题中。

$(document).on('turbolinks:load', function(){
  $(".accordion").accordion({
    collapsible: true
  });

  $(".ui-accordion-header").css("background","grey");
  $(".ui-accordion-header").css("focus","grey");
  $(".ui-accordion-header").css("border","#acb8a9");

});