Carousel images with differing heights occasionally fail to unify, misplacing navigation elements

[mrleemon]

Impacted plugin

Jetpack

Quick summary

The Jetpack Carousel block occasionally fails to dynamically resize images with varying heights to a uniform height when the carousel is loaded. This inconsistent height calculation causes the overlay elements (left/right navigation arrows and the image counter) to be positioned incorrectly, often appearing vertically misaligned or floating outside the intended boundary.

This issue appears to happen randomly, only when the image files loaded into the carousel have noticeable differences in their native aspect ratios or dimensions.

I've seen that manually changing the browser zoom level (e.g., using Ctrl + or Ctrl -) will instantly trigger a recalculation and fix the layout, returning the carousel to the correct, unified height.

I've experienced this bug in the desktop versions of Firefox, Chrome and Safari.

Here is a screenshot showing the issue:

Steps to reproduce

Note: This bug is difficult to reproduce reliably, suggesting a race condition or timing issue in the JavaScript resizing logic. The following steps outline the setup that allows the issue to manifest.

Prerequisites: Ensure the Jetpack plugin is active and the Carousel block is enabled.

1. Create a new page or post in the WordPress editor.
2. Add a Jetpack Carousel block.
3. Add a set of images to the carousel that have significantly different native heights/aspect ratios (e.g., mix of portrait, landscape, and square images).
4. Publish the page and view it in a browser.
5. Repeatedly hard-refresh the page or view the page across different network conditions/browsers.

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Major

What other impact(s) does this issue have?

Individual site owner revenue

If a workaround is available, please outline it here.

No response

Platform (Simple and/or Atomic)

No response