Home › Forums › Support › Un-positioned masonry posts show briefly on infinite scroll append in Safari
- This topic has 9 replies, 2 voices, and was last updated 4 months, 2 weeks ago by
Tom.
-
AuthorPosts
-
October 14, 2020 at 7:44 pm #1489527
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 adjusttransitionDuration
and/orvisibleStyle
, 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?
October 15, 2020 at 9:57 am #1490788Tom
Lead DeveloperLead DeveloperHi 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-developmentOctober 15, 2020 at 10:36 am #1490834Randall
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; } );
October 15, 2020 at 3:06 pm #1491124Tom
Lead DeveloperLead DeveloperHmm, 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-developmentOctober 16, 2020 at 10:01 am #1492318Randall
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=blueThe 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=blueJetpack 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.
October 16, 2020 at 11:27 am #1492423Tom
Lead DeveloperLead DeveloperHmm, 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-developmentOctober 16, 2020 at 8:57 pm #1492720Randall
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?
October 17, 2020 at 11:24 am #1493512Tom
Lead DeveloperLead DeveloperNot 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-developmentOctober 17, 2020 at 7:54 pm #1493775Randall
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?
October 18, 2020 at 12:04 pm #1494664Tom
Lead DeveloperLead DeveloperI 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 -
AuthorPosts
- You must be logged in to reply to this topic.