Automattic / Automattic/jetpack

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

Open
#45,861 0 comments 0 reactions 0 assignees View on GitHub
[Plugin] Jetpack [Pri] Normal [Status] Auto-allocated Bug Needs triage
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### 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:

Image

### 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_

Contributor guide

Open the contributing guide

Research direction

Start at the Jetpack Carousel block's JavaScript resizing logic and reproduce the issue with images of mixed aspect ratios, comparing initial page load with the zoom-triggered recalculation. Done means image heights are consistently unified and the navigation arrows and counter remain correctly positioned across the reported browsers and loading conditions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.