Okay so I’ve been having a weird issue where my scroll bar works but it’s invisible you can see it flicker in as soon as you load the page and then it vanishes. I for the life of me can’t figure out why this keeps happening. My store is keyztotheheart.com
Topic summary
Issue: The storefront scrollbar is functional but invisible; it briefly appears on page load (flickers) and then vanishes.
Context: Shopify Store Design; tags: liquid, troubleshooting. Affected site: keyztotheheart.com.
Investigation so far:
- A responder points to custom CSS altering the scrollbar, directing to base.css around line ~3155 (theme asset link provided).
- The store owner reports this likely isn’t the cause. In base.css the scrollbar width is set to 10px, but after loading it quickly becomes about 1px, indicating the visible width changes after the initial frame.
Technical notes:
- CSS (Cascading Style Sheets) rules in base.css control presentation; scrollbar width is governed by custom scrollbar styles and can be overridden by later-loaded styles.
Status: Unresolved. The current evidence suggests a later override or conflicting style is affecting the scrollbar after initial render. Further tracing of CSS rules applied after load (and their order) is needed. No final fix or decision yet.
Hey @keyztotheheart
Looks like you’ve got some custom CSS modifying the scrollbar. Check line ~3155 of base.css.
https://keyztotheheart.com/cdn/shop/t/30/assets/base.css?v=174714497252206975381701731131
Unfortunately I don’t think that’s quite it. The width for the scroll bar in base CSS is 10 pixels when I load it in it only pops up he has one pixel after about a frame