Jetpack Carousel: Unresponsive Navigation Buttons

[hanananah]

Impacted plugin

Jetpack

Quick summary

Jetpack Carousel overlay navigation buttons (previous, next, exit) are unresponsive when clicked

Steps to reproduce

1. Create a page or post
2. Add the Gallery block with 2+ images
3. View the live page
4. Click on one of the gallery images to open the carousel overlay
5. Click any of the carousel overlay navigation buttons

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

Clicking the previous and next arrows navigate to other images in the gallery, respectively. The exit button closes the carousel overlay.

What actually happened

Clicking any of the navigation buttons does nothing visibly.

Impact

All

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Workaround for using carousel overlay buttons: Keyboard controls (← → esc) allow for navigating gallery images and closing carousel overlay

CSS workaround:

.jp-carousel-overlay { 
    pointer-events: all !important; 
}

[ricjcs]

Hello,

It's the same issue I opened previously: #34653

[rickmgithub]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated (infact the image didn't appear either)

📌 FINDINGS/SCREENSHOTS/VIDEO

Simple site

Screen.Capture.on.2023-12-15.at.22-19-55.mov

Atomic site

Screen.Capture.on.2023-12-15.at.22-21-31.mp4

Please see duplicate - #34653

[jeherve]

This was also reported in Automattic/wp-calypso#85063

• 7435686-zen
• 7431162-zen
• 7440378-zen
• 7441820-zen
• 7442519-zen
• 7430958-zen
• 7440528-zen
• 7428054-zen
• 7430592-zen
• 7457021-zen
• https://wordpress.com/forums/topic/image-carousel-next-prev-close-buttons-not-working-in-brave-or-edge/

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 7435686-zen
• 7431162-zen
• 7440378-zen
• 7441820-zen
• 7442519-zen
• 7430958-zen
• 7440528-zen
• 7428054-zen
• 7430592-zen
• 7457021-zen
• 7435226-zen
• 7448394-zen
• 7459689-zen
• 7460350-zen
• 7462509-zen
• 7463013-zen
• 7464348-zen
• 7462949-zen
• 7466551-zen
• 7462693-zen
• 7466834-zen
• 7457289-zen
• 7476567-zen

[jeherve]

The problem is limited to Chrome-based browsers.

It may be linked to this violation:

Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

This hasn't changed on our end since Carousel was first released (see 68b4294), so it must be linked to recent changes in Chromium.

No the problem doesn't come from there. It's something here:

jetpack/projects/plugins/jetpack/modules/carousel/jetpack-carousel.js

Line 1569 in 924b3a3

domUtil.fadeIn( carousel.overlay, function () {

In Firefox:

In Chrome:

cc'ing @sgomes, who may be the most familiar with that part of the codebase.

[csonnek]

Also reported in: https://wordpress.com/forums/topic/gallery-chrome-120/?view=all

[OmarFPG]

7431162-zen is checking in again. I took the opportunity to play a little bit with it and found a workaround:

.jp-carousel-overlay { 
    pointer-events: all !important; 
}

I also notified 7430958-zen and 7428054-zen since they're on CSS-enabled plans as well (I found some on Personal or Free plans that this won't work for them).

[OmarFPG]

Played into another ticket with the gallery bug that wasn't reported yet: 7435226-zen. Provided the CSS workaround.

[OmarFPG]

Played into another ticket with the gallery bug that wasn't reported yet: 7448394-zen. Provided the CSS workaround.

This is now listed as Closed, but I still see the bug going on customer's sites 🤔

[andrii-lysenko]

@OmarFPG I assume the fix was merged, but it won't be visible to customers until it's deployed. Next deploy to Simple would be on Monday. On Atomic later next week. And for self-hosted - with next Jetpack release.

[OmarFPG]

Thanks for the heads-up! If we get more tickets until then we can provide the CSS workaround =)

[saginpj]

• 7459689-zen

• 7460350-zen

• 7462509-zen

[ktyfuller604]

• 7463013-zd-a8c

[donalirl]

#7464348-zen

[saginpj]

• 7462949-zen

[rinazrina]

7466551-zd-a8c

[saginpj]

• 7462693-zen

[sdixon194]

Just noting Jetpack 12.9.1 has just been released which should address this issue.

[Aurorum]

@sdixon194 is that for Simple sites? We just had a report in 7466834-zen (WP.com Personal plan) and can confirm that it hasn't been fixed, even after clearing cache

[OmarFPG]

Same here. I just came to say that I'm testing on a customer's site, and I still see the bug. I'm sending the workaround for the time being

[ghtoronto]

Info on issue and progress also being posted here - https://wordpress.com/forums/topic/image-carousel-next-prev-close-buttons-not-working-in-brave-or-edge/page/2/?view=all#post-4011706

[sdixon194]

The 12.9.1 release was for self hosted sites. I tried to reproduce but I couldn't on my own simple test site. However I did just conduct a daily wpcom deploy five minutes ago which included the fix.

Would you mind checking one more time to see if the recent deploy fixed it? If not, I don't seem to have access to the ticket but you can DM me the user's site and I can take a closer look.

[Aurorum]

Thanks so much @sdixon194! Can confirm that the recent deploy has fixed it (at least on this user's site).

[ricjcs]

I also confirm that the update solves the problem, it's perfect. Thanks!

[ghtoronto]

Galleries in both my Wordpress.com sites are working fine now in Brave/Chrome/Edge ….. thanks to all who fixed the issue!

[OmarFPG]

7457289-zen still bugged. Personal plan so no CSS workaround here.

[druesome]

7476567-zen

Atomic site still has this bug. Would anyone know when the fix will arrive on AT sites? Thanks!

[Robertght]

@sdixon194 could this change also affect the following?

From the user:

The emails which are sent automatically to subscribers, when I upload a new post, used to contain medium-sized (about half body text width) copies of all the images in the post - until late March '23. Subscriber emails sent after that all contain large images. At first, these were unsharp compared with the medium-sized version, but tolerable. However, since early October, they have been very blurry. Not good!
I realise that, in 'GALLERY SETTINGS', I can change the size The default is 'Thumbnail'; if I change it to 'Large', the images in the emails are clear and sharp. However, I can see no option to change the default, so I have to remember to change this every time (and I often forget to do so)

More, including screenshots here: 7462949-zd-a8c

LE: my example:

[sdixon194]

@Robertght hmm, that issue seems separate and based on the timeline would have occurred before this breakage, I don't think this issue or the resolution was the culprit. I'll cc @monsieur-z just in case to double check.

Would you mind opening a new issue so it can be tracked separately?

[monsieur-z]

The fix does not impact emails indeed.

[poeticabdul]

Would you mind opening a new issue so it can be tracked separately?

Created a new issue here Automattic/wp-calypso#85753

[zdenys]

7457289-zd-a8c Bug is still present on a WordPress.com Personal plan site, thus no CSS workaround is possible.