Scrollbar visible in Mobile safari

Hey guys, first time forum user here and just finishing my first site in Webflow. Loving it! Wondering if you guys can help me out. I’ve set some overflow scrolling to my category list in mobile view only. It shows great in Chrome but on Safari, it’s not showing the scroll indicator until you start scrolling. See screenshot below. 1st in Safari and 2nd in Chrome.

Here’s the custom code I used.

::-webkit-scrollbar { width: 8px; padding: 2.5px; } ::-webkit-scrollbar-track { background: #f5f7fa; } ::-webkit-scrollbar-thumb { background: #6d7d8b; border-radius: 6px; border: white 1px solid; } ::-webkit-scrollbar-corner { display: none; height: 0px; width: 0px; } .SCROLLABLE-Div-Class-Name { overflow-x: hidden;}
  1. Is there something I need to add to display in Safari?
  2. Can I hide the custom scrollbar design in desktop and other views? It changes the scroll bar design for the entire site rather than that one collection list/div in mobile view?

Thanks for your help.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Did you set the scrollbars to show in the Webflow editor?
Screen Shot 2022-08-10 at 10.14.28 AM