Un-positioned masonry posts show briefly on infinite scroll append in Safari

[Randall]

Hi,

I’m having some additional trouble with Safari when using the Gp Premium Blog Layout with Masonry and Infinite Scroll.

Everything is fine on Chrome and Firefox, but with Safari I’m getting a moment or two of re-arranging animation when new posts with featured images load via infinite scroll.

I discovered the generate_blog_masonry_init filter, and have tried using that to to adjust transitionDuration and/or visibleStyle, but I still get a flash of un-positioned posts before layout happens. This most evident when the cache has been cleared.

Is there a way to hide that initial flash of un-positioned posts for this one browser?

The problem gets much worse when I turn on the image CDN feature in Jetpack. That causes some posts to stay stuck without layout until the next batch of posts loads. Which I realize is not entirely related. But FWIW, the theme I’m coming from (blask, one of automattic’s themes) used a second call to masonry and a opacity animation wrapped in a 1500 millisecond timeout on posts coming from infinite scroll. Which might be an effective way to mask both issues.

Any chance of doing something similar here?

[Tom]

Hi there,

What you’re seeing there is masonry doing a re-layout to account for the images loading – it would be a terrible mess without it doing that.

I suppose it might be possible to hide things until it’s finished – can you share the masonry_init code you’ve tried already?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Randall]

Hi Tom,
Thanks for taking a look at this.

Here’s the now-disabled snippet:

add_filter( 'generate_blog_masonry_init', function( $args ) {
    $args['transitionDuration'] = '0s';
    $args['visibleStyle'] = array(
			'opacity' => 1,
        );
    $args['hiddenStyle'] = array(
			'opacity' => 0,
        );
    return $args;
} );

[Tom]

Hmm, that code applies to masonry, but not sure it will work with infinite scroll as well, as masonry is already initiated and simply re-does the layout once infinite scroll appends the new items.

Does the same thing happen to you here?: https://infinite-scroll.com/#masonry-isotope-packery

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Randall]

For me, the generate_blog_masonry_init filter definitely does change the loading of the posts that arrive by infinite scroll. I’ve turned the snippet on and edited the transition duration to 2 seconds on the dev copy of the site: https://dev2.sloweye.net/?s=blue

The demo you linked to behaves differently for me than what I am seeing in any of the browsers with my own site. The demo shows a clear y-axis animation in all three browsers. My own live site with no modification to generate_blog_masonry_init is showing a simple fade into place with no x-axis animation on Chrome and Firefox, but a reshuffling animation with desktop safari. This is easily seen on the live version of my site: https://sloweye.net/?s=blue

Jetpack is in use on the live version, so getting the stuck un-positioned posts thing happening there when the cache is empty, especially on the 2nd or third batch of posts from infinite scroll.

[Tom]

Hmm, I’m having a tough time seeing what would be causing this in Safari and not other browsers.

The infinite scroll script itself is outside of our control, of course, but I suppose it could be something in our configuration.

The demo I linked to is doing this:

add_filter( 'generate_blog_masonry_init', function( $args ) {
    $args['stagger'] = 30;

    $args['visibleStyle'] = array(
        'opacity' => 1,
        'transform' => 'translateY(0)',
    );

    $args['hiddenStyle'] = array(
        'opacity' => 0,
        'transform' => 'translateY(100px)',
    );

    return $args;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Randall]

With the transition duration slowed to 2 seconds, it looks like Safari doesn’t reposition masonry bricks that arrive from infinite scroll until they are already visible. If I set a transform using generate_blog_masonry_init it happens while the bricks are moving into place. If I set transitionDuration to zero, it shows a brief flash of the posts before positioning, then they immediately appear again in the position set by masonry.

It looks like https://infinite-scroll.com/#masonry-isotope-packery does not use srcset. Maybe Safari’s srcset issues are part of the issue?

I was looking through some other themes and noticed that the same method that was working for me in blask is also used in illustratr, another automattic theme. There’s a copy of this one on github. Here is a link to the lines in the portfolio.js file laying out posts that arrive via infinite scroll

Is there any way to do something like that forced layout correction wrapped in a timeout here?

[Tom]

Not without changing the core file. If we were to do that in the plugin itself, it would need to be in a feature version so it gets thoroughly tested.

Out of curiosity, does the issue remain if you disable srcset?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Randall]

Turning srcset off definitely fixes it! With that off I’m getting the expected small translateY transform. Looks like it takes care of the stuck un-positioned posts when using the Jetpack Image CDN also.

Here’s the snippet I used to turn srcset off:
add_filter( 'wp_calculate_image_srcset', '__return_false' );

Seems like if I’m using Jetpack’s Image Accelerator formerly-known-as Photon, I could maybe be fine without srcset, at least for now?

[Tom]

I think I know what’s going on. Safari has trouble with srcset images and infinite scroll: https://github.com/metafizzy/infinite-scroll/issues/770

So we need to re-paint the image once the page has loaded or else they won’t show.

It’s likely that the re-paint is what’s causing that extra shuffle that you’re seeing.

Turning off srcset is likely your best bet, at least until Safari or Infinite Scroll (less likely) fix the issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts