Slideshow block shows extra space below the block on Safari browser on mobile

[galakhyati]

Impacted plugin

Jetpack

Quick summary

When viewing the post with a Slideshow block from Safari browser on mobile, there is an extra gap below the slideshow image. When viewing from a desktop Safari browser, it shows the gap, but once all the assets are loaded, the gap disappears. We're not able to replicate the issue on other browsers, this is only occurring on Safari browser. The user has cleared the cache on the mobile browser but still the issue persists. Checked on staging site as well and the issue was replicated there too.

User ticket: 8320193-zd-a8c

Steps to reproduce

1. Open Safari browser (if possible open in incognito) on mobile browser (Safari)
2. Visit https://staging-bdb8-dangitbee.wpcomstaging.com/2024/06/10/boundaries-the-meadows-06-05-2024/
3. Scroll down and find the slideshow under KAONASHI section.
4. the first few images when scrolled through shows an extra gap at the bottom.

Screencast video: https://github.com/Automattic/jetpack/assets/7382505/fc5c8036-3cab-420d-b4db-77b0defe4efe

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

No gap should be shown under the slideshow block on any browsers/devices. Like on Chrome browser (mobile):

What actually happened

There is a gap showing on the Safari browser on mobile device.

Impact

One

Available workarounds?

There is no user impact

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Browser: Safari

[github-actions[bot]]

Support References

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

• [ ] 8320193-zen

[syhussaini]

I tested it on Chrome and Safari on iPhone and noticed the gap below the slideshow in both browsers. The strange part is that the gap does not appear in the first slideshow but below all other slideshow blocks after the first one.

Chrome: https://d.pr/i/HgNcuX Safari:

1. First slideshow block with no whitespace below it: https://d.pr/i/ke5018
2. The next slideshow block with whitespace below it: https://d.pr/i/nXJqQM

This happens at random I'd be happy to help! Here's the revised text:

I've also noticed that the gap disappears sometimes when you close the mobile browser and reopen it from the recent apps. The same steps also remove the gap from some random slideshow blocks, but not all. For example, the KAONASHI slideshow block shows a gap when viewed for the first time as in this image https://d.pr/i/nXJqQM, but the gap disappears when I close and relaunch the Safari browser from the recent apps as in this image https://d.pr/i/lLvqB6.

[syhussaini]

The user would like to be notified when the issue is resolved. #8320193-zen

[galakhyati]

This is an issue with the Twenty Four Theme. When switching to the Fewer theme The slideshow shows up all okay on Safari mobile browser. Kudos to @suyogyashukla for helping find it out. Related Forum: https://wordpress.org/support/topic/flash-of-unstyled-content-fouc-2/

[peterschimke]

@galakhyati what's the status of this? It looks like the issue is still happening on the initial example site.

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.