벽돌은 moblie 브라우저 (크롬)에서 작동하지 않고 새로 고침 (f5)이 아닌 페이지를 새로 고침 (Ctrl + F5)하면 Chrome 데스크톱 버전에서만 작동합니다.

Question

벽돌은 모바일 브라우저에서 작동하지 않습니다. 새로 고침 (f5)시 Chrome에서 작동하지 않습니다. 다른 브라우저에서 페이지를로드하거나 캐시 (Ctrl + 5)를 사용하지 않고 페이지를 완전히 다시로드하면 제대로 작동합니다. jsfiddle에서도 작동하지 않습니다.

메이슨 사이트 자체가 이러한 브라우저에서 작동하기 때문에 작동해야한다는 것을 알고 있습니다.

내가 열 너비를 정의하는 격자 크기의 컨테이너를 사용하고, 다른 차원 타일을 해요 :

은 벽돌 페이지로드에서 시작됩니다

.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); 
    } 

: 여기

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

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

는 jsfiddle입니다 코드 : http://jsfiddle.net/BartBurg/BtKHL/ 참고 : jsfiddle에서는 다른 브라우저에서도 작동하지 않습니다.

편집 :

내가

Answer 1

솔루션은 억지이고 아마 매우 드물게 발생하지 않습니다 (하지 새로 고침/다시로드에) 두 번째 시간 동안 웹 사이트에 접속하여 페이지를 다시로드하면 파이어 폭스는이 문제가 .

내 .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" /> 

을 그리고 내가 어떤 자바 스크립트를 포함하기 전에 솔루션은 스타일 시트를 포함했다 : 나는 jQuery.ready에 벽돌을 시작하기 때문에

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

이 흥미 롭다() :

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

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

스타일 시트를 생성 된 .css 스타일 시트로 바꾸면, masonry도 예상대로 작동합니다.

내 생각에 * .js 및 * .css가있는 모든 행이 올바르게로드되고 보류 * .scss 파일을 기다리지 않을 때 Chrome과 Firefox가 DOM 준비 이벤트를 실행합니다.

이것이 전체 페이지 새로 고침 (Ctrl + F5) 및 새로 고침 (f5)에서 작동하지 않는 이유는 신비입니다