Support » Plugin: AMP » Amp plugin disrupts image caption alignment

  • Dear Support,

    I’m presently building a straightforward WP site that will ultimately be a series of long read / reference articles, all designed to be 100% AMP.

    The issue I’ve encountered with the AMP for WP plugin is that when activated and in standard mode, it disrupts the image block caption (figccaption) text alignment vertically. N.B. No problems horizontally. No page builders, I’m just using the standard WP block builder.

    I’ve deactivated all plugins and rolled back to the default 2021 theme and still have the issue with only the AMP plugin activated. If I deactivate it, the issue goes away. Thus I am pretty sure it’s a consequence of the AMP plugin being active.

    There are two straightforward additional css entries to dress the figcaption, these have been removed and ruled out as the problem still manifests itself.

    The figcaption misalignment issue usually appears on captions when viewing on a mobile device and can be resolved by forcing a change of view to landscape mode and then back to portrait mode.

    Occasionally the problem also is encountered when viewing the website on desktop with the wordpress bar active at the top of the browser.

    The main URL for testing is https://undiscoveredberchtesgaden.com/the-story-behind-lake-konigssee/ but all posts on this site exhibit the same misalignment of the figcaption, albeit quite randomly!

    I’ve been chasing my tail over this for quite some time now, having even tried the AMP2.1 beta plugin just to see if that made any difference. Alas no luck.

    Any toughts/ideas would be extremely welcome.

    Thanks,

    Stephen

    The page I need help with: [log in to see the link]

Viewing 10 replies - 16 through 25 (of 25 total)
  • Plugin Support James Osborne

    (@jamesosborne)

    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?

    Thread Starter shawsje

    (@shawsje)

    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).

    Plugin Support James Osborne

    (@jamesosborne)

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

    Plugin Support James Osborne

    (@jamesosborne)

    @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.

    Thread Starter shawsje

    (@shawsje)

    Hello James,

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

    Plugin Support James Osborne

    (@jamesosborne)

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

    Plugin Support James Osborne

    (@jamesosborne)

    @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:http://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,

    Plugin Support Milind More

    (@milindmore22)

    @vincent777 Please create a new support topic

    Plugin Support James Osborne

    (@jamesosborne)

    @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.

Viewing 10 replies - 16 through 25 (of 25 total)
  • You must be logged in to reply to this topic.