Masonry not working properly in Safari

[Craig Rogers]

Hi,

I’ve got a situation where I’m putting ads (placehold.it image for now) in with content which we are pulling in from several social media sites. We’re using a custom loop in layout.php like this:

<?php 
if ($thepostcount % 6 == 0) { ?>	
	<div class="wmle_item_holder <?php echo $shortcodeData['wmlo_columns'] ?>" style="display:none;">
	    <div class="wmle_item">
		<div class="ads">
		   <?php include ('ads.php'); ?>
		</div>
	    </div><!-- wmle_item -->
	</div><!-- EOF wmle_item_holder -->
<?php }; ?>

It works fine in all browsers in full width windows. But in Safari in 1 column screens beyond the first instance of the ad when the infinite scroll loads more items, the layout does not respect the height of the ad and gets overlaid by the next item. Example (the gray box is the placeholder image):

The site is http://rentedlifestyle.z.pressplatform.com

Can you suggest what might be causing this issue?
Thank you!

[Craig Rogers]

PS: The include is simply a call to the placeholder image
<img src="http://placehold.it/350x250" />

[Masonry Guy]

Hi Craig,

To check this in more details, can you please send me your site url where you have setup this ?

Thanks

[Craig Rogers]

Thank you for looking into this! The site is http://rentedlifestyle.z.pressplatform.com

[Masonry Guy]

Hi Craig,

I am sorry but i don’t see such issue here mobile/desktop safari. I can see banner like this https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250 and they looks good to me.

Thanks

[Craig Rogers]

Hi MG,

Thank you for your reply. The first banner always displays correctly. The problem occurs when you scroll past the first infinity scroll screen. Are you not seeing the issue there? The image below is a screenshot from the second “set” of posts – about the 18th post. My guess is masonry/imagesloaded is not calculating the absolute position correctly, because it’s not reading that image’s height dimensions before rendering the layout. I just don’t know why that would be happening in this case. Any guidance you can give will be appreciated.

Thank you!

[Masonry Guy]

Hi Craig,

Ya. I am still unable to replicate this issue here. It all looks good to me.

Can you please let me know your OS, device and browser version ?

Thanks

[Craig Rogers]

Thanks for helping out!

Just to follow up for anyone else who might have this issue, I resolved it by putting the ad container dimensions inline in layout.php so masonry could read them with each new page render. This was the HTML that worked:

<div class="wmle_item_holder <?php echo $shortcodeData['wmlo_columns'] ?>" style="display:none;">
  <div class="wmle_item">
    <div class="ads" style="width:100%; max-width:320px; height:250px;; margin: 0 auto 20px; padding: 10px; text-align: center;">
	<?php include ('ads.php'); ?>
    </div><!-- ads -->
  </div><!-- wmle_item -->
</div><!-- EOF wmle_item_holder -->

I added this to the theme style.css to make the images responsive:

.ads img {
    width: 100%;
    height: auto;
}

[Masonry Guy]

Hi Craig,

Sorry that i couldn’t replicate that issue here. So glad that you found the solution and thank you so much for posting it here.

I really appreciate your time and effort here.

Thanks

[Author]

Posts