Automattic / Automattic/jetpack

Gallery block: x Icon to Close Carousel view breaks on Safari Browser when an Image has a Caption with 4 or more lines

Open
#25,006 0 comments 0 reactions 0 assignees View on GitHub
[Feature] Carousel [Plugin] Jetpack [Pri] Low Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Steps to Reproduce

When an image with a caption with 4 or more lines is added to a gallery, the `x` icon to close the slideshow moves from the right side to the left and becomes unusable.

Screencast:

https://d.pr/i/l3Cjh0

In the screencast, the issue occurs upon moving to the second image.

User report: #35681823-hc

1. On the Safari browser, log into an Atomic site and create a new page.
2. Make sure that the Carousel module of Jetpack is enabled.
3. Add a gallery block to the page.
4. Add some images to the block.
5. While adding an image to the gallery, edit the caption of one of the images to contain at least 4 lines. Screencast: https://d.pr/i/aS51A0
6. Save the page and view it in the Safari browser.
7. Click on one of the gallery images and scroll through each using the left and right arrows.

### A clear and concise description of what you expected to happen.

For the `x` icon to remain on the top right corner, and for me to be able to click on it to close the slideshow.

### What actually happened

The `x` icon moves from the top right corner to the top left. Clicking on it doesn't do anything but sometimes results in the image zooming in. The icon tends to break once the image with the 4-line caption is loaded in the slideshow.

### Reproducibility

Can replicate consistently on Atomic and self-hosted sites with Jetpack enabled. Issue does not occur on Simple.

### Operating System

macOS

### Browser

Safari

### Browser Version(s)

15.1

Contributor guide

Open the contributing guide

Research direction

The issue does not name an implementation file or test. First reproduce it with the Jetpack Carousel module, a gallery image with a four-line caption, and Safari 15.1; done means the close icon stays in the top-right and closes the slideshow after navigating between images.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php, wordpress
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.