Random placement of images not working in chrome

I have a code within my website that works perfectly well on safari: it places 10 images on Z and Y positions within a container, each of a random size between 100 and 230 pixels.

Now, for some reason it ONLY seems to work on safari. Upon trying different browsers they all seem to be placed along one specific line next to my menu, like they're floating to the left? Changing the positions does not help, nor does fiddling with the function itself.

I'm a little at loss as to why it would work on safari and not on chrome nor firefox.

for (var i = 0; i < 5; i++) {
  $('.random-pane').append('<div class="grid-item"></div>');
}
$( '.grid-item' ).each(function( index ) {
  $(this).css({
    left : Math.random() * ($('.random-pane').width() - $(this).width()),
    top : Math.random() * ($('.random-pane').height() - $(this).height())
  });
});

$('[class*="item-"]').each(function() {
  $(this).width((Math.random() * 230) + 100);
})