Question

我正在为一个已经成为一个相当亲密的朋友的客户建立一个网站，所以我试图让一切都很完美（他可能会忽略这个问题，但这不是我想要做的那种工作）。该网站在开发环境中运行良好，但在Heroku的（预）生产中，页面加载（尤其是单击页面顶部的导航链接）时会出现非常令人不安的抖动，您可以通过访问Heroku URL查看：

https://gentle-headland-62741.herokuapp.com/products

有很多不同的SCSS，HTML和JS文件正在加载，因此在这里重现它们没有意义，但这里似乎是最有可能追踪罪魁祸首的代码部分： / p>

products.scss

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

custom.js（将jQuery手风琴用作被调用的库）

$(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");

});

如果有人能帮助我，我会非常感激因为我真的希望网站尽可能接近完美的客户，他们一直很友好，理解，而且只是一般来说，工作的乐趣。

在这个gif中可以看到颤抖：

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

关于Heroku页面加载div文本的Judder但在开发环境中工作正常

0 个答案: