shawsje

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

Hello James,

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

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

<figure class="wp-block-image size-large"><img src="https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Lake-Konigssee-Echowand.jpg" alt="" /><figcaption>Despite the introduction of electric boats in the early 20th century to minimise noise pollution, the use of the black powder pistols continued up until the 1930s</figcaption></figure>

<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Lake-Konigssee-Echowand.jpg" alt="" /><figcaption>Despite the introduction of electric boats in the early 20th century to minimise noise pollution, the use of the black powder pistols continued up until the 1930s</figcaption></figure></div>

• This reply was modified 3 years, 11 months ago by Steven Stern (sterndata).
• This reply was modified 3 years, 11 months ago by Steven Stern (sterndata).

Hi James,

Yes I’ve tested using another iPhone and laptop (windows) and seen similar behaviour.

Here is the non-visual editor code for two of the images showing this behaviour:

<figure class="wp-block-image size-large"><img src="https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Lake-Konigssee-Echowand.jpg" alt="" /><figcaption>Despite the introduction of electric boats in the early 20th century to minimise noise pollution, the use of the black powder pistols continued up until the 1930s</figcaption></figure>

<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Lake-Konigssee-Echowand.jpg" alt="" /><figcaption>Despite the introduction of electric boats in the early 20th century to minimise noise pollution, the use of the black powder pistols continued up until the 1930s</figcaption></figure></div>

• This reply was modified 3 years, 11 months ago by Steven Stern (sterndata).

Hi James,

An interesting observation: if I put the same image with the same formatting into a 100% column, the image caption behaves as expected (with AMP enabled).

I’ve duplicated all images in the same way (first a 100% column, second the image with no container) on https://undiscoveredberchtesgaden.com/self-guided-tour-of-lake-konigssee/ and there’s a screenshot showing the glitch here:

https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/04/Help-6.png

Stephen

Hi James,

Yes, with 2021 theme the same behaviour is exhibited. Wide & full image width give no caption alignment issues, whereas centre/no alignment do.

I’m tempted to see if there’s a way of simply limiting the image wide width to the post container width as a workaround for now…but even if possible, it’d be nice to figure out what’s going on.

Regarding replicating the issue…perhaps its related to the image dimensions I’m using? Feel free to scrape the images from the page we’re working on https://undiscoveredberchtesgaden.com/self-guided-tour-of-lake-konigssee/ to test. (hope you’re interested in alpine lakes…)

Thanks to the link, leaving things set to default seems the best option then.

Hi James,

After some further elimination of causes (total reinstall of WP, installing only the Neve theme plus AMP and required posts & images) I can report that this figure caption alignment problem arises when using certain image alignment options in the default blocks page builder with the AMP plugin active.

If I select either wide or full width alignment there is no caption misalignment across mobile, tablet and desktop with the AMP plugin active. Perfect! except I’m after a long-read contained look… Left, right, centre or no alignment produce the alignment error across all platforms.

AMP image options are kept consistently at default and AMP lightbox enabled.

Any ideas as to what differentiates wide and full with to the other alignment options? Does the AMP plugin treat these differently?

I must admit I haven’t’ been able to find much in the way of documentation discussing the AMP image ‘AMP layout’ options…can you point me in the right direction? Responsive seems the best selection for an AMP only site, but I wonder if this setting might also have some bearing on the caption alignment issue here? Hence leaving this at default.

Looking forward to your thoughts,

Stephen

Hi James, site health information posted via the link you provided.

Thanks for the suggestions, I’ve give the troubleshooting plugin a go and can confirm that using the default 2021 theme and disabling all plugins bar AMP and Health check produces the alignment errors. This is then resolved by disabling the AMP plugin.

Could you please elaborate on “The Google fonts applied don’t seem to be applicable to your theme”?

Thank you,

Stephen

Transitional mode produces the error on the AMP pages but not canonical.

https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help5-scaled.jpg

Hi James,

Using transitional mode I’ve tested the canonical URLs of all 4 long read pages and there are no image caption formatting errors.

If I go to the AMP versions the image caption vertical alignment errors are still there (sporadically).

I’ll linkn an example from the https://undiscoveredberchtesgaden.com/the-story-behind-lake-konigssee/ post when viewing the AMP version.

I’ll also submit the site health report to you as requested.

Does this shed any light on the root cause? Thanks for looking into this for me.

Some mobile/desktop screenshots to illustrate the issue:

https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help1-scaled.jpg
https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help2-scaled.jpg
https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help3.png
https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help4.png