Live Site Displays Gaps When Scrolling on Safari macOS and iOS due to Slideshow Repeaters / Repeaters (Includes Workaround)
Published:Known Issue|This issue was resolved.
Issue has been resolved on macOS and iOS version 17.5. Please update your device to the latest versions to confirm the fix.
We are aware of an issue affecting the scrolling performance of a site when slideshow repeaters or regular repeaters are present on the page and have their heights set to fr or auto (this also applies if it's stretched).
This can make empty gaps as you scroll down the page until the content fully loads. It is caused by an issue on Safari on macOS and on multiple browsers on iOS.
The issue comes from any container's hierarchy that involves grids inside of grids (just like in these 2 components) with their height units used being either fr or auto can be affected by this issue on Safari.
In the meantime, you can use the following workaround:
- Find any slideshow repeater in the Studio Editor.
- Select component and open the inspector.
- Under the Size section, click the More Actions icon (...) and enable Advance Sizing.
- Add any height value to the component using pixels.
- Repeat steps 1-4 for any other slideshow repeater on the page.
- Publish and visit the live site to confirm the problem is no longer present.
Notes:
If the slideshow repeater / regular repeater is stretched or docked both on top and bottom it is not possible to adjust the height. You will have to unstretch it (the width can then be adjusted to 100% width) or remove the docking from one of the sides.
