1px Lücke mit Isotope Mauerwerk (oder Packery) expecialy auf Safari

Question

tut mir leid für mein Englisch.

Es ist viele Tage, die ich versuche, ein Problem zu lösen, das ich sehe, ein reaktionsfähiges Raster voller Bilder zu erstellen. Um dieses Raster zu erstellen, verwende ich Isotop mit Mauerwerk Layout (http://isotope.metafizzy.co/) oder Packery (http://packery.metafizzy.co/layout.html). Ich habe beides versucht und in beiden habe ich das gleiche Problem. Für eine Auflösung meines Browsers sehe ich eine 1px Lücke zwischen den Bildern (wie Sie in den Bildern sehen können).

Ich habe über dieses Problem in vielen Post (zB https://github.com/metafizzy/packery/issues/42) lesen, aber keine Lösung funktioniert für mich. Kann mir jemand helfen?

Im Moment ist mein Code:

jQuery(window).load(function() { 

var container = document.querySelector('.grid'); 
var pckry; 
// using imagesLoaded http://desandro.github.io/imagesloaded 
imagesLoaded(container, function() { 
    pckry = new Packery(container, { 
    itemSelector: '.grid-item', 
    rowHeight: '.grid-sizer', 
    percentPosition: true 
    }); 
}); 
}); 

lege ich das letzte Raster, das ich habe möchte:

Answer 1

Nach vielen Tagen der Arbeit, die ich in der Lage gewesen zu lösen Mein Problem dank DeSando, dem Autor des Plugins.

Wie er in diesem Beitrag http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry erklären/die Lücken auftreten aufgrund Pixelrundungsunterschiede zwischen JavaScript und CSS.

In meinem Fall habe ich ein Gitter basierend auf vier Spalten und wenn die Breite des Browsers nicht teilbar war pro 4 wurden die Lücken geboren. So, wie DeSandro schlägt here, ein Workaround ist, Container von Bildern ein wenig kleiner zu machen und die Lücken mit Bildern ein wenig größer zu decken. Also, in meiner Website:

HTML

<div class="grid"> 
    <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div> 
    <div class="grid-item grid-item--width2 " ><a href=#"><img src="..." title="" class="lazy"></a></div> 
    <div class="grid-item grid-item--width2 "><a href="#"><img src="..." title="" class="lazy"></a></div> 
    <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div> 
    <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div> 
    ... 
</div> 

CSS

.grid { 
    margin: 0 auto; 
    width: 100.4%; 
    margin-bottom: 0px !important; 
} 
.grid-sizer,.grid-item { 
    width: 24.9%; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    list-style: none!important; 
} 
/* 2 columns wide */ 
.grid-item--width2 { 
    width: 49.8%; 
    display: block; 
    float: left; 
} 
.grid-item img{ 
    display:block; 
    width: 100.4%; 
    max-width: 100.4% !important; 
} 

JS

// init Packery 
var grid = jQuery('.grid').packery({ 
    itemSelector: '.grid-item', 
    percentPosition: true 
}); 
// layout Packery after each image loads 
grid.imagesLoaded().progress(function() { 
    grid.packery(); 
}); 

Es tut mir leid für mein Englisch. Ich hoffe, dass dies für viele von uns nützlich sein könnte.