Topic: Masonry not working properly in Safari | WP Masonry Layout

Masonry not working properly in Safari

Home Forums Pro Version Masonry not working properly in Safari

This topic contains 8 replies, has 2 voices, and was last updated by  Masonry Guy 1 year, 5 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #11866 Reply

    Craig Rogers
    Participant

    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):
    example

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

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

    #11867 Reply

    Craig Rogers
    Participant

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

    #11882 Reply

    Masonry Guy
    Keymaster

    Hi Craig,

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

    Thanks

    #11883 Reply

    Craig Rogers
    Participant

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

    #11893 Reply

    Masonry Guy
    Keymaster

    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

    #11894 Reply

    Craig Rogers
    Participant

    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!

    rented lifestyle

    #11907 Reply

    Masonry Guy
    Keymaster

    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

    #11914 Reply

    Craig Rogers
    Participant

    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;
    }
    #11923 Reply

    Masonry Guy
    Keymaster

    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

Viewing 9 posts - 1 through 9 (of 9 total)
Reply To: Masonry not working properly in Safari
Your information: