Post Carousel Block + AT: First slide breaks after first run through

[supernovia]

Describe the bug The first slide image appears only on the first run through the slider. After that, the first slide image is blank.

This happens whether I let it autoplay or swipe manually. It appears only if I touch it, or if I allow autoplay, it appears briefly just as the next slide comes into view.

All of the other slides are fine, regardless of how many I've added. Unless I swipe backward manually, then last slide stops working and the first one is alright.

I was not able to reproduce this on Simple, but I can consistently reproduce on Atomic.

To Reproduce 1) Start with an Atomic site 2) Publish a few posts with featured images 3) Publish a page with the Post Carousel Block. Default settings are fine. 4) View the page on a mobile browser

Screenshots https://supportmediatech.files.wordpress.com/2022/03/rpreplay_final1646798437.mov

Expected behavior The carousel works for its first play through. It should continue to work.

Context

• Reported by a user in ZD-4826284
• Not duplicated on Simple Site
• If the site is Atomic, duplicated on iPhone SE in Chrome and Safari (current)
• Theme does not seem to matter
• Number of posts does not seem to matter (the first is always affected)
• I only have one phone for testing, but given that it works on a simple site, I doubt it's limited to iPhone SE.

[supernovia]

I was only able to test on iPhone SE, so if others can try it that'd be fab. You can view https://veldatestatomic.wpcomstaging.com

[khristiansnyder]

Just noting the same user will want an update on any solutions to this when there is one. #4826284-zen

[laurelfulford]

I've hit a bit of a wall with this one, so I need to loop in someone else from the team to take a look.

Adding some notes about what I discovered in my testing below:

Best I can tell, this is related somehow to Lazy Loading images -- the post with the images that won't load have a srcset value with an encoded 1px gif, like data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7.

Turning off "Lazy load images" in Jetpack seemed to fix it for me for now (under Settings > Jetpack > Performance. The 'Site Accelerator'/Photon seemed fine to leave on, it was just Lazy load images in particular).

Some other random notes:

• I was able to recreate this on my own AT test site with an iPhone 11, and on Safari on desktop (v 15.4).
• I can not recreate this on a Newspack site (I tested on the McMansion), even though it’s also on the Atomic infrastructure.
• I can only recreate it with certain themes -- like IP2 and Twenty Seventeen did show the issue. The FSE themes I tested, and Twenty-Twenty-One and Twenty Twenty seemed to work as expected, which is strange.
• Adding a Jetpack Slideshow to same page with the Post Carousel also seemed to fix it, which makes me wonder if it could somehow be related to the version of swiper JS library we're using, though I couldn't find a similar report in that repo. (Jetpack has a custom version of swiper). This might be a red-herring, though.
• Installing and activating the Newspack Blocks plugin seemed to let me use the version of the Post Carousel from that plugin (it made the WP.com version of the block return a message that the site didn't support the a8c/post-carousel block, and the one I added from the 'Newspack' section of the post inserter worked as expected). That copy of the block also had the same issue.

@khristiansnyder for the short-term, can you ask the user to try turning off lazy loading images and seeing if that does the trick for them, too?

[laurelfulford]

As I've hit a wall with this issue, I'm going to un-assign it from me to free it up for someone else to take a look -- let me know if anyone has any questions about my comments above!

[rinazrina]

I got another report on AT site: #6178989-zen

The issue happens on desktop and mobile (tested using Chrome, Android).

Disabling Lazy load works as a temp workaround.