Stacking Posts Showing Up Overlapped

[stewofkc]

I'm having a problem with the CSS on my blog website. Sometimes when I load it, the posts will be stacked on top of each other, so that the image and text are all smashed together. Then if I refresh the page, the issue goes away. Any suggestions?

The image is an example of the posts loaded correctly, as I can't get the problem to replicate right now.

 

[dsonesuk]

Your masonry effect uses position: absolute; and you are using large sized images for the medium sized images, which take time to fully load. I should think what is happening is JavaScript code is running to check the size of containers  and applying position: absolute; and top: left: with height and width properties before the images are loaded, so the height, and top: positioning is wrong. Only when you reload the page the images are cached and so appear instantly and the JS coding can correctly gain the correct dimensions and where to position them.

That is the problem with using position absolute, the elements that use this, cannot identify the whereabouts or dimensions of other sibling elements using absolute positioning and position themselves accordingly (referred to as 'out of flow'), each of these elements need height, width, along with top: left: individually set.

The JavaScript should be set to run after the page is fully loaded, which include in images, then this problem is unlikely to appear. Another option is to preload these images as well OR better still use masonry feature that does not use position: absolute but css3 column-count with display: inline-block; instead