[Resolved] Caption overlap

[Paul]

I have an issue that seems to occur in Safari in particular, both on the Mac and the iPad. I don’t know whether the theme (GeneratePress Marketer) or Gutenberg is to blame, but have found no mention of it in a search for Gutenberg-related bugs.

What happens is that I load a page, and the caption for a picture appears overlapping the text in the block below it. If I reload the page, it lays itself out properly.

The page is rendering in amphtml, incidentally, via the official Amp plugin, in case that is another possible cause.

Has anyone else encountered this?

[David]

Hi there,

not seen that particular issue before – and i am no Amp expert. But i noticed the Amp CSS includes this CSS:

.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption {
    display: table-caption;
    caption-side: bottom;
}

table-caption has been known to bug out on Safari.
Try overwriting that with this CSS:

.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption {
    display: block !important;
}

[Paul]

Thank you, David. I’m having trouble finding that css in any of the countless .css files in the AMP plugin. Do I need to add it there, or can it be added in the custom css section of the customizer?

Paul

[David]

You can add it in your Custom CSS in the Customizer. The !important should stop it being overwritten if Amp loads CSS later.

[Paul]

Thank you, David. That does seem to help. I’ll keep an eye on it as caches clear to make sure!

Cheers,

Paul

[David]

Awesome – never seen that issue before – fingers crossed it’s stable. Let us know if not.

[Author]

Posts