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