页面首次加载时的大小差异

Question

在我的网站上，我正在使用一些Bootstrap功能来帮助我的CSS。当我第一次加载页面时，我遇到一个奇怪的问题，一些元素的位置最初是关闭的，但是当我重新加载页面时，它是固定的。关于如何解决此问题的任何想法？

  

下面的图片供参考。

HTML：

...

it('should open article', () => {
        expect($scope.articles).toBeDefined();

        $scope.toggleFeature(1);

        expect($scope.articles[0].opened).toBe(true);
});

...

but sure, it won't work this way - I have a promisse inside
I can't change my code to return anything...
so: is it possible to test such function somehow?

CSS：

<div class="media post-react">
  <%= link_to post do %>
    <div class="media-left hidden-sm hidden-xs">
      <%= image_tag("#{post.thumbnail_link}", :width => 320, :height => 180, class: "news-object") %>
    </div>

    <div class="media-body">
      <div id="media-heading">
        <h2 class="media-title align-left"><%= post.title %></h2>
        <p class="blog-index-date align-right"><span class="hidden-sm">Last updated: </span><%= post.updated_at.strftime('%b %d, %Y') %></p>
      </div>
      <div style="clear: both;"></div>
      <p class="basic"><%= post.summary %></p>
      <p> </p>
      <p class="hype"><b>Read More</b></p>
      <p class="post-cat blog-index-date"><%= post.blog_category.name if post.blog_category_id.present? %></p>
    </div>
  <% end %>
</div>

首次加载：

刷新后：

这个问题在过去几周内一直存在。感谢您的帮助！

Answer 1

所以，问题似乎出在我在代码中放置样式表链接的地方。在第一个示例中，可能存在需要花费较长时间才能加载的元素（例如Google Analytics（分析））。

我移动的样式表：<%= stylesheet_link_tag "bootstrap.min", "application" %>

将链接移至Google Analytics（分析）上方后，似乎可以解决定位问题。