Masonry item margin-bottom issue

Question

I've activated Masonry on the parent element (an unordered list) that houses the modified list items listed below (with Chrome's F12 DEV tools showing the margin-bottom and margin-right in the pink-ish color):

When the document is loaded, the above occurs despite the CSS of each list item being the following;

li {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    float: left;
    padding: 20px;
    position: relative;
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
}

The jQuery I used is the following;

$(document).ready(function(){
    $("ul").masonry({
        itemSelector: 'li'
    });
});

Once the window is resized horizonally, however, the CSS styles come into effect as shown below;

Any idea as to how I can acheive the above on page load?

UPDATE*

JSFiddle: Click here. If the said problem doesn't appear, try clicking the 'Run' button (Ctrl + Return).

Answer 1

For the webkit browser problem I simply added $(window).load(function(){ before ('#masonry').masonry({. Now the margin-bottom is fine on every item on every browser.

Answer 2

It works finde as sone as I add gutter: 10 ;

$("ul#news").masonry({
    itemSelector: 'li',
    gutter: 10
});

Explenation: http://masonry.desandro.com/options.html#gutter