HTML5 Mauerwerk Margin/Gutter Problem bei der Verwendung der festen Sidebar (EDGE & Firefox)

Question

Ich versuche ein Masonry Wall mit einem Design, das eine feste Seitenleiste Menü Layout verwendet, funktioniert es bis zu einem gewissen Grad, aber es ist eine Bodenrinne hinzufügen, was nach der Größenanpassung des Ansichtspunkts behoben wird. Dieses Problem tritt anscheinend nur bei der Verwendung von Firefox und Edge auf, Chrome scheint einwandfrei zu funktionieren.

Dieser praktische Fehler scheint sicherlich zu tun, macht die Runden auf Stack Overflow. Die meisten dieser Probleme, die in Stack Overflow aufgeführt sind, werden gelöst, indem sichergestellt wird, dass das Mauerwerk nach dem Laden der Seite ausgelöst wird, um die Positionen korrekt zu berechnen. Leider ist dies der Fall und ich denke, dass es mit meiner Sidebar-Menü verknüpft sein kann.

JSFiddle

Mit jQuery(window).load(function(){ scheint nicht das Problem zu beheben. Das Hinzufügen der Position, die am rechten Container fixiert ist, behebt das Problem, bricht jedoch den Bildlauf ab und empfiehlt, diese Methode nicht zu verwenden, wenn dies vermieden werden kann.

Ich habe mir die Zeit genommen, dieses Projekt zu einem JSFiddle hinzuzufügen, um dieses Problem zu diagnostizieren.

• Dev Site
• JsFiddle

Screenshot von Ausgabe

HTML

Unverwandter vollständiger Code kann auf dem JsFiddle oder meinem Dev Site überprüft werden.

<div class="amino-wrapper"> 
    <div class="amino-wrapper-left"><!-- SIDE BAR --></div> 
    <main class="amino-wrapper-right"> 
     <div class="grid"> 
      <div class="grid-sizer"></div> 
      <a href="#" class="grid-item"><img src="#"></a> 
      <a href="#" class="grid-item"><img src="#"></a> 
      <a href="#" class="grid-item"><img src="#"></a> 
     </div> 
    </main> 
</div> 

CSS

Unrelated vollständige Code kann auf der JsFiddle oder meine Dev Site prüft werden.

img { 
    max-width: 100%; 
    height: auto; 
} 

.amino-wrapper { 
    height: 100%; 
    width: 100%; 
} 

.amino-wrapper-left { 
    background-color: #1c1c1c; 
    border-right: 1px solid #eee; 
    color: #eee; 
    height: 100%; 
    left: 0; 
    padding: 4rem 2rem; 
    position: fixed; 
    top: 0; 
    width: 300px; 
} 

.amino-wrapper-right { 
    margin-left: 300px; 
    overflow-x: hidden; 
    position: relative; 
    top: 0; 
    width: calc(100% - 300px); 
} 
.amino-wrapper-left header { 
    left: 0; 
    position: fixed; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 300px; 
    text-align: center; 
} 
.grid-sizer, .grid-item { 
    width: calc(100%/3); 
    width: 33.33% 
} 

.grid { 
    overflow: hidden; 
} 

JavaScript

jQuery(window).load(function() { 
    jQuery('.grid').masonry({ 
     // set itemSelector so .grid-sizer is not used in layout 
     itemSelector: '.grid-item', 
     // use element for option 
     columnWidth: '.grid-sizer', 
     gutter: 0, 
     percentPosition: true 
    }) 
}); 

Answer 1

Das folgende CSS dieses praktische Problem für mich festgelegt:

• body { overflow-y: scroll; }