0

Masonry doesn't work on moblie browser (chrome) and it doesn't work in Chrome on refresh (f5). It does work correctly if I load the page in any other browser or if I fully reload the page without using its cache (ctrl+5). It also doesn't work on jsfiddle.

I know it should work because the Masonry site itself does work on these browsers.

I'm using a grid size container for defining the column width, and have tiles with different dimensions:

    .project {
      width: $column_width;
    }

    .grid-sizer {
    width: $column_width;
  }

    .project.oneXtwo {
    width: $column_width;
    height: (2* $column_width);
    }

    .project.twoXone {
    width: (2* $column_width);
    height: $column_width;
    }

    .project.twoXtwo {
    width: (2* $column_width);
    height: (2* $column_width);
    }

Masonry gets initiated on page load:

columnWidth = $(".project").width();
        $(".project").height(columnWidth);
        $(".twoXtwo").height(columnWidth * 2);
        $(".oneXtwo").height(columnWidth * 2);

        container.masonry({
          columnWidth: ".grid-sizer",
          itemSelector: '.project',
          isAnimated:true,
        });

Here is the jsfiddle for the code: http://jsfiddle.net/BartBurg/BtKHL/ note: in jsfiddle it doesn't work on any other browser either.

Edit:

Firefox also has this problem if I reload the page by accessing the website for the second time (not on refresh/reload)

4

1 に答える 1

0

解決策はとてつもないものであり、おそらく非常にまれにしか発生しません。

サーバー側で .SCSS ファイルを解析するために scssphp を使用しています。この問題には、SCSS ファイルと JS ファイルを含めました。

<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

<!-- Stylesheets -->
<link type="text/css" href="style.php/responsive.scss" rel="stylesheet" />

そして解決策は、Javascript を含める前にスタイルシートを含めることでした。

<!-- Stylesheets -->
<link type="text/css" href="style.php/responsive.scss" rel="stylesheet" />

<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

jQuery.ready() で組積造を開始するため、これは興味深いものです。

$( function() {
    ...
    initMasonry(container);
});

function initMasonry(container){
    ...
    container.masonry({
      columnWidth: ".grid-sizer",
      itemSelector: '.project',
          isAnimated:true
    });
    ...
}

スタイルシートを生成された .css スタイルシートに置き換えると、石積みも期待どおりに機能します。

私の推測では、Chrome と Firefox の両方が、*.js と *.css を含むすべての行が正しく読み込まれ、保留中の *.scss ファイルを待たないことを確認すると、DOM Ready イベントを発生させます。

これがページ全体のリロード（ctrl + f5）で機能し、リフレッシュ（f5）では機能しない理由は私には謎です

于 2013-10-16T13:46:22.070 に答える