Automattic / Automattic/jetpack

Slideshow block: Slides sometimes not displaying in Chrome, Safari

Open
#16,114 2 comments 0 reactions 0 assignees View on GitHub
[Block] Slideshow [Pri] Low Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### Steps to reproduce the issue

1. Set up a Slideshow block.
2. View the site in Chrome on Mac OSX, and refresh/reload a number of times.

#### What I expected
The slideshow always loads.

#### What happened instead

Very occasionally, the slideshow does not become visible. When this happens, it looks like the `data-jetpack-block-initialized` attribute gets set to true in the `wp-block-jetpack-slideshow` div, but without the `wp-swiper-initialized` or other classes being added.

This was [first reported on a Newspack site](https://therivardreport.com/), where it was happening pretty consistently. I was eventually able to trip up a jurassic ninja test site, but it took a lot of refreshes/cache clearing.

In both cases, the block displayed as expected in Firefox; the issue only seemed to happen when it did in Chrome and Safari.

Talking with @dkoo when troubleshooting, he thought it sounded like a race condition, possibly related to this line of code: https://github.com/Automattic/jetpack/blob/master/extensions/blocks/slideshow/view.js#L23.

**Screenshots**

In Chrome (v83.0.4103.97, MacOSX 10.14.6)
![image](https://user-images.githubusercontent.com/177561/84208359-6d94a400-aa68-11ea-8d42-a65a7f01efe2.png)

In Firefox (v77.0.1, Mac OSX 10.14.6)
![image](https://user-images.githubusercontent.com/177561/84208551-de3bc080-aa68-11ea-8a2b-e1f3c6a1e4c6.png)

Contributor guide

Open the contributing guide

Research direction

Start with extensions/blocks/slideshow/view.js around line 23, then reproduce the issue by repeatedly refreshing the Slideshow block in Chrome or Safari. Done means the slideshow becomes visible reliably and its initialization classes, including wp-swiper-initialized, are present when initialization completes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.