Amp plugin disrupts image caption alignment

Many thanks for your patience on this. My colleague has since been able to recreate this from his side, using a Safari browser it occurs on first load. As you mentioned it occurs across multiple themes.

I’ve since opened the below GitHub issue from which we can investigate further:
https://github.com/ampproject/amp-wp/issues/6035

For the moment can you please try the below workaround?

.wp-block-image .aligncenter, .wp-block-image .aligncenter>figcaption{
    position:relative;
	display:inline-block;
}

In addition can you share whether you encounter this on other mobile or desktop browsers other than Safari?

Hi James,

I can confirm that the workaround additional css has worked well so far, would you advise also applying this to the .wp-block-embed objects? e.g. embedded youtube videos?

This has been encountered on desktop Chrome as well as desktop Safari. As for mobile, we’ve only tested on Safari but have encountered the problem across multiple different devices (iPad, iPhone X, XS, 6S).

Great to hear it. I’ll work on this today and let you know, I haven’t tested this out on other blocks.

@shawsje Just to keep you updated we’re still investigating this from our side. I’ve been unsuccessful on my side in recreating this so far although my collage did encounter the same at some stage as per the additional context in the GitHub issue I created.

Do you have any other sites you’ve been able to reproduce the issue on, that you haven’t applied any CSS based solutions? We can then do some additional testing on such URLs.

Hello James,

At present it’s only this website that I am building so can’t provide any other instances of this happening.

Thanks for the update. I’ll check this with the team who have also been looking into this and keep you posted here.

@shawsje Are you able to provide any videos demonstrating this behaviour using a Chrome browser? While you mentioned it doesn’t occur consistently we’ve been investigating this and so far only been able to reproduce in Safari.

If you could share a video of this behaviour in a Chromium based browser using a service such as Loom or RecordIt we can investigate further. Keeping your Chrome developer tools open may also be useful.

Hi,

I am having the same issue. It only happens on Safari mobile. I checked Chrome with my Android and no issue with the caption alignment.

For Safari mobile, I can refresh the browser or even quickly turn the screen off and on and the caption is aligned correctly.

Unfortunately, the above CSS solution doesn’t work for me. Here’s my URL:https://aperlust.com/best-travel-neck-pillows

screenshot https://imgur.com/a/qiuWOID

I’m using the Divi theme. Let me know if you can help.

Thanks,

@vincent777 Please create a new support topic

@shawsje Just wondering are you able to share any examples of this using Chrome or any other Chromium based browser? From our testing so far we’ve been only able to recreate using webkit browsers.

Hello James,

Sorry about the delay coming back to you.

I can only reproduce in Safari at present, with the workaround code you provided temporarily removed from the Neve theme custom CSS.

in Safari the error with the image/fig caption offset (on desktop) now seems consistent as per the following video grab: https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/06/Help-Webkit-Example.mov

I will keep trying in Chrome. Do you think this is a browser-amp issue, hence Chromium-based are proving more reliable?

Stephen

No problem at all, thanks for checking. I can’t be sure of the cause but you’re correct, it does seem browser specific.

Let us know if you do encounter this on Chrome.