Jump to content

Stacking Posts Showing Up Overlapped

Recommended Posts

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.



Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...