header-logo
Learn how to use Wix to build your site and business.
Design and manage your site using intuitive Wix features.
Manage subscriptions, plans and invoices.
Run your business and connect with members.
Learn to purchase, connect or transfer a domain to your site.
Get tools to grow your business and web presence.
Boost your visibility with SEO and marketing tools.
Get advanced features to help you work more efficiently.
Find solutions, learn about known issues or contact us.
placeholder-preview-image
Improve your skills with our courses and tutorials.
Get tips for web design, marketing and more.
Learn to increase organic site traffic from search engines.
Build a custom site using our full-stack platform.
Get matched with a specialist to help you reach your goals.
placeholder-preview-image
  1. Home
  2. Studio, Partners & Enterprise
  3. Wix Studio
  4. Using the Wix Studio Editor
  5. Adding elements in the Studio Editor
  6. Live Site Displays Gaps When Scrolling on Safari macOS and iOS due to Slideshow Repeaters / Repeaters (Includes Workaround)

Live Site Displays Gaps When Scrolling on Safari macOS and iOS due to Slideshow Repeaters / Repeaters (Includes Workaround)

Published: March 20, 2024
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:
  1. Find any slideshow repeater in the Studio Editor.
  2. Select component and open the inspector.
  3. Under the Size section, click the More Actions icon (...) and enable Advance Sizing.
  4. Add any height value to the component using pixels.
  5. Repeat steps 1-4 for any other slideshow repeater on the page.
  6. 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.
We appreciate your patience while we resolved this issue.