1px зазор, используя изотопную кладку (или упаковку) expecialy на Safari

Question

Прошу прощения за мой английский.

Это много дней, когда я пытаюсь выяснить проблему, которую я вижу, пытаясь создать гибкую сетку изображений с полной шириной. Для создания этой сетки я использую изотоп с масонством (http://isotope.metafizzy.co/) или Packery (http://packery.metafizzy.co/layout.html). Я пробовал и то и другое, и у меня такая же проблема. Для некоторого разрешения моего браузера я вижу разрыв в 1px между изображениями (как вы можете видеть на изображениях ниже).

Я прочитал об этой проблеме во многих пост (например, https://github.com/metafizzy/packery/issues/42), но ни одно решение не работает для меня. Кто-нибудь может мне помочь?

На данный момент мой код:

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

Я придаю финальную сетку, я хотел бы иметь:

Answer 1

После многих дней работы я был в состоянии решить моя проблема благодаря DeSando, автору плагинов.

Как он объясняет в этом сообщении http://metafizzy.co/blog/beyonce-seamless-fluid-image-masonry/пробелы происходят из-за различий округления пикселей между JavaScript и CSS.

В моем случае у меня есть сетка, основанная на четырех столбцах, и когда ширина браузера не делится на 4, рождаются пробелы. Таким образом, поскольку DeSandro предлагает here, обходным путем является установка контейнера изображений немного меньшим и покрытие пробелов изображениями немного больше. Так, в моем веб-сайте:

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

Я прошу прощения за мой английский. Надеюсь, это может быть полезно для многих из нас.