search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

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

Open galakhyati opened 3 months ago

galakhyati commented 3 months ago

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): Screenshot_2024-06-18-12-04-33-08_40deb401b9ffe8e1df2f1cc5ba480b12

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] commented 3 months ago

Support References

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

syhussaini commented 3 months ago

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 commented 3 months ago

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

galakhyati commented 3 months ago

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/