Missing images in amp-carousel added by jetpack

[rsmith4321]

Bug Description

If I manually add an amp-carousel using an html block, all images load correctly. However, if I add a carousel using the jetpack slideshow block, which is converted by the amp plugin into an amp-carousel, on the first page load there is always missing images. If the page is refreshed the images appear. This is an issue I've had for a long time.

Expected Behaviour

All images should appear after cache is cleared and page first loads.

Steps to reproduce

Load the page here https://www.ryansmithphotography.com for the first time or after clearing cache.

Screenshots

https://drive.google.com/file/d/1go9FYGGTugRTyUlqvqKMNLTx636hxBBJ/view?usp=sharing

Additional context

• WordPress version: 5.5.1
• Plugin version: 2.0.1
• Gutenberg plugin version (if applicable):
• AMP plugin template mode: Native
• PHP version: 7.4.1
• OS: Mac and Android
• Browser: [e.g. chrome, safari] Chrome
• Device: [e.g. iPhone6] Mac and Galaxy S20

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

@rsmith4321 The screenshots aren't accessible.

And actually, the AMP plugin doesn't do any conversion of the Slideshow block. It is emitted as an <amp-carousel> directly from Jetpack: https://github.com/Automattic/jetpack/blob/40e2c3f49324fa9fefa54c31674ab2ef27451d82/extensions/blocks/slideshow/slideshow.php#L81-L106

Therefore, the bug is either with Jetpack or with AMP itself. I see you've reported this to AMP as well: ampproject/amphtml#27036 (comment)

[westonruter]

I wonder if it has anything to do with server-side rendering.

Could you try adding this plugin: https://gist.github.com/westonruter/8d52c0b807e6dfbbdf2219622d0f4a7e

That will disable SSR, and then you can force it on with ?amp_ssr=true or off with ?amp_ssr=false.

[rsmith4321]

Sorry I thought I had mentioned this issue before but couldn't find it. I disabled SSR with your plugin and the issue seems to have gone away. Then I disabled the plugin to reactivate SSR and now I can't seem to replicate the issue. Does SSR create some type of caching that needs to be cleared, perhaps disabling it cleared out the cache?

…

On Mon, Sep 14, 2020 at 11:23 AM Weston Ruter ***@***.***> wrote: I wonder if it has anything to do with server-side rendering. Could you try adding this plugin: https://gist.github.com/westonruter/8d52c0b807e6dfbbdf2219622d0f4a7e That will disable SSR, and then you can force it on with ?amp_ssr=true or off with ?amp_ssr=false. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5377 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB2Y5H7K736KEEOQCFVKKYDSFYYQTANCNFSM4RLXFB7A> .

[westonruter]

SSR doesn't create a cache. It just reduces the amount of work that the AMP runtime JS has to do once the page loads. Apparently this is reducing too much of the work that the runtime has to do, as it's not going so far as to render that image.

Please leave that "Disable SSR" plugin active so that the AMP team can compare the page with and without SSR.

[rsmith4321]

I will reactivate the plugin for testing, I've also been able to recreate the missing image issue in an incognito window. It only seems to happen on first load.

…

On Mon, Sep 14, 2020 at 10:29 PM Weston Ruter ***@***.***> wrote: SSR doesn't create a cache. It just reduces the amount of work that the AMP runtime JS has to do once the page loads. Apparently this is reducing *too* much of the work that the runtime has to do, as it's not going so far as to render that image. Please leave that "Disable SSR" plugin active so that the AMP team can compare the page with and without SSR. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5377 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB2Y5H5HRSL7JIX42QMYFNTSF3GSDANCNFSM4RLXFB7A> .

[rsmith4321]

Actually, on further testing, I was able to create the issue even after activating the disable ssr plugin. I seem to be able to reliably create this issue if I open developer tools in chrome and do an empty cache and hard reload of the page. Here is a screenshot https://drive.google.com/file/d/1N8NoPaupaTv3xvv2R5QwOSgJfZPJV6_M/view?usp=sharing

…

On Tue, Sep 15, 2020 at 8:46 PM Ryan Smith ***@***.***> wrote: I will reactivate the plugin for testing, I've also been able to recreate the missing image issue in an incognito window. It only seems to happen on first load. On Mon, Sep 14, 2020 at 10:29 PM Weston Ruter ***@***.***> wrote: > SSR doesn't create a cache. It just reduces the amount of work that the > AMP runtime JS has to do once the page loads. Apparently this is reducing > *too* much of the work that the runtime has to do, as it's not going so > far as to render that image. > > Please leave that "Disable SSR" plugin active so that the AMP team can > compare the page with and without SSR. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#5377 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AB2Y5H5HRSL7JIX42QMYFNTSF3GSDANCNFSM4RLXFB7A> > . >

[westonruter]

I can reproduce it, and it is frustratingly sporadic. I took a screencast of reproducing the issue after several failed attempts at reloading: https://youtu.be/nBtjBtai8s0

Unfortunately, this doesn't appear to have anything to do with the AMP plugin, so I'll follow up on the AMP core issue.