I searched for this topic but don’t find anything…my product page works fine in CHROME…but when I look at my product page on Safari its all goofy pictures go missing the bottom drops out and there is this forever SCROLL to nothing…any suggestions?
Topic summary
A Shopify store owner reports their product page displays correctly in Chrome but malfunctions in Safari. Issues include missing images, elongated layout, and infinite scrolling when hovering over elements.
Key Details:
- Using the Trade theme with minimal customization
- Quick buy boxes were disabled, which partially improved Safari performance
- Problem occurs when cursor hovers over card elements—the bottom extends infinitely
- Multiple users confirmed experiencing the same Safari issues
Troubleshooting Attempts:
- One responder couldn’t replicate the issue, suggesting it may be device or Safari version-specific
- Screenshots provided showing dramatic layout differences between browsers
Proposed Solutions:
- Check Safari DevTools and Responsive Design Mode for console errors
- Clear browser cache or perform hard refresh
- Investigate CSS/JS browser compatibility issues
- Test with default Shopify theme to isolate whether Trade theme is the cause
- Disable third-party apps one-by-one to identify conflicts
- Add version numbers to CSS/JS files to force fresh loads
Status: Unresolved—root cause not yet identified, though CSS compatibility with iOS/Safari is suspected.
I am using the TRADE THEME
Hello @Homemadegarden ,
Sounds like the css is compatible with windows but not with IOS.
Can you please confirm which theme you are using ?
Regards
Guleria
TRADE these thanks
OOPS I meant TRADE THEME lol
I checked its demo in safari but can’t find any issue as you mentioned.
Can you confirm, have you done customization in it ? If yes make sure you didn’t break any existing css and the new css you used is compatible with IOS.
no I don’t even know how to do customization…LOL
nothing but whats on the theme itself i turned off the QUICK BUY BOXES because they were showing up at the very bottom after you scrolled forever to see them…they were in my FOOTER
Hello @Homemadegarden Could you share screencapture for it? I don’t know well why it’s not working on the safari. You said trade theme. is it right?
Could i search it on my end?
Am I able to contact the people who made the theme?
I removed the quick buy boxes because that made it a LITTLE better in safari
I feel it’s css issue on your store. Could you share your store link? it needs to check on my-end. If it’s not publish theme, please let me know also password for theme. if it’s protected theme, you should show the password on the preference.
no matter what I do I can’t get it to work on Safari its just the strangest thing I simply click on the page and roll my curser over things and pictures disappear, and everything becomes elongated it happens right in front of your eyes
It’s showing like this on my end. So it’s not theme issue. It’s showing only your side. thank you if you send the safari version
Or please do it like this:
1.Inspect the site in Safari DevTools
Use Responsive Design Mode in Safari → Cmd + Shift + R
2.Check for console errors
Any error with layout-breaking JS/CSS will show here
I don’t understand…Ive had several people check it and we all see the same thing how are you seeing what you see…as soon as we run the curser over anything the bottom drops out and you can scroll endlessly to the bottom
I am using the CARDS and the bottom of the card just keeps going and going and going
Hey! This kind of stuff happens pretty often with Shopify pages. Usually, if your product page looks fine in Chrome but gets all messed up in other browsers, it’s one of these things:
Browser cache acting up — Chrome might be loading some old CSS or JS files from cache, while other browsers get fresh files. Try clearing your cache or do a hard refresh. Also, adding version numbers to your CSS/JS files helps force browsers to load the latest.
Browser compatibility issues — Sometimes the CSS or JS uses features that only work in Chrome or newer browsers. Check if you’re using any Chrome-specific code or fancy CSS that others don’t support well.
Theme or custom code quirks — Your theme might have some code that’s only tested on Chrome or has conditional stuff targeting it. Try switching to a default Shopify theme and see if the problem sticks. If it looks good on default, it’s probably your theme causing issues.
Third-party apps/plugins conflicts — Sometimes apps inject scripts or styles that behave differently across browsers. Disable those one by one to check.
Also, open the developer console (F12) in the browsers where it’s broken and look for errors or failed file loads. That can give clues.
Bottom line: start with clearing cache, test on different browsers, check console errors, and try a default theme to isolate the issue. Most times it’s either caching or some browser-specific code messing things up.