How can I fix the issue of the scrollbar line not being displayed on iOS devices for the horizontal scroll gallery on my Webflow site?

TL;DR
  • Ensure CSS displays scrollbars, adjust Webflow overflow settings, and verify on real iOS devices.
  • Use -webkit-overflow-scrolling: touch for smooth iOS scrolling and check custom code for issues.

The issue of the scrollbar line not being displayed on iOS devices for your horizontal scroll gallery may stem from specific styling or default behaviors of iOS browsers. Here's how you can address it:

​

1. Ensure Scrollbar Visibility in CSS

  • Review CSS: Check your site's CSS for any styles that might be hiding the scrollbar.
  • Add Styles: Ensure that the scrollbar properties highlight it visibly. Consider adding -webkit-overflow-scrolling: touch to your gallery container for smoother scrolling on iOS devices.

​

2. Webflow Designer Adjustments

  • Check Overflow Settings: Go to the element settings in Webflow and ensure that overflow is set to scroll rather than hidden.
  • Style Scrollbar: If you are using custom styles for the scrollbar, ensure they're compatible with WebKit browsers by using the ::-webkit-scrollbar pseudo-element.

​

3. Test on iOS Devices

  • Real Device Testing: Test the gallery on actual iOS devices, as emulator results might differ.
  • Multiple Browsers: Check the display across different iOS browsers like Safari and Chrome.

​

4. Check for Interfering Scripts or Styles

  • Review Custom Code: Ensure that any custom JS or CSS doesn't inadvertently hide or affect scrollbars.
  • Disable Styles or Scripts: Temporarily remove custom styles or scripts to see if they are the cause.

​

Summary

Ensure your CSS allows for visible scrollbars, adjust overflow settings in Webflow, and test on real iOS devices. Modifying your CSS with -webkit-overflow-scrolling: touch can enhance the experience. If problems persist, examine custom coding for interference.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What is the issue with the Safari browser action bar on iPhones and iPads when using a full screen home page created with the Webflow platform?
What does it mean when I see the message "No value passed for parameter 'siteSlug'" after adding my GA Measurement ID in Webflow and saving changes, and could this be related to using a .studio domain for my website?
How can I maintain the aspect ratio of 16:9 for images uploaded in Webflow without affecting the layout?
How can I fix the issue where the background image is repeated on scroll on mobile devices in Webflow?
Can I create an uneven grid layout using a CMS collection in Webflow?
How can I resolve the issue with the slider mask in Webflow, where it is currently taking the height of the tallest slide and causing empty space in certain slides? I have tried using the CMS feature for the slider, but it is not available yet. I also tried using the finsweet CMS slider, but the height issue still exists.
How can I enable user sorting of CMS items in Webflow using a "sorting number" field and Memberstack integration? Is this feature possible to implement?
What are the uses of Webflow and its integrations with third party tools?
What changes are Webflow making to the custom code cleanup process?
Is it possible to create a slider with multiple collection lists on the home page in Webflow, containing 2 slides with 3 collection lists (blogs) on each slide?
How can I trigger a typing text effect within the same wrapper in Webflow, first vertically and then horizontally?
How can I easily change the default styling of my website in Webflow without having to update each individual item? Is it possible to change the default font through CSS or with custom code in the head?
How can I create a custom lightbox with dynamic content in Webflow?
Why is my heading text in Webflow not breaking into a new line and overflowing instead?
How can I prevent body scrolling when opening a fullscreen mobile navigation menu and enable scrolling when closing it in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?