Squarespace Not Working on Safari

Safari Privacy Features Causing Issues

Intelligent Tracking Prevention (ITP)

Safari's ITP blocks third-party cookies and limits first-party cookie lifetimes. This affects analytics tracking (Google Analytics may under-report Safari visitors), third-party login systems, and any feature that relies on cross-site cookies. If analytics data seems low for Safari users or embedded third-party features do not work, ITP is likely the cause.

There is no way to disable ITP for your visitors - it is a Safari feature controlled by Apple. Design your site to work without relying on third-party cookies. Use first-party data collection methods where possible. For analytics considerations, our Squarespace SEO guide covers tracking and analytics configuration.

Content Blockers

Safari on iOS and macOS supports content blockers that prevent scripts, images, and resources from specific domains from loading. If third-party widgets (chat, social feeds, analytics) do not appear in Safari, a content blocker may be preventing them. Ask affected users to check Safari settings for installed content blockers and add your site as an exception.

Cross-Site Tracking Prevention

Safari restricts cross-site tracking more aggressively than Chrome. Third-party embeds (Facebook feeds, embedded forms from external services, social login buttons) may not function correctly because Safari blocks the cross-site requests they depend on. Test all embedded third-party content in Safari specifically. For embedding issues, our guide to embedding iframes in Squarespace covers cross-browser compatibility.

Safari Caching Issues

Aggressive Page Caching

Safari caches pages more aggressively than Chrome, especially on iOS. Changes you make to your Squarespace site may not appear in Safari even after the changes are live on the server. Fix: force reload by pressing Cmd+Shift+R on Mac. On iOS, go to Settings > Safari > Clear History and Website Data. On macOS, enable the Develop menu (Safari > Preferences > Advanced > Show Develop menu) and click Develop > Empty Caches.

Back-Forward Cache

Safari's back-forward cache (bfcache) stores a complete snapshot of pages so they load instantly when visitors use the Back button. This can show outdated content if the page changed since the snapshot was created. JavaScript that runs on page load may not re-execute when the page loads from bfcache. This affects Code Injection scripts that initialize once - they may not fire when visitors navigate back to the page.

Safari Rendering Differences

CSS Differences

Safari's WebKit engine renders CSS slightly differently from Chrome's Blink engine. Common differences: font rendering (Safari text often appears slightly thinner), flexbox behavior (minor alignment differences), scroll behavior (Safari handles overflow scrolling differently), and backdrop-filter support (limited in older Safari versions).

If your Squarespace site looks different in Safari, use browser DevTools to inspect the affected elements and add Safari-specific CSS fixes. The -webkit- prefix is still required for some CSS properties in Safari. For CSS cross-browser techniques, our guide to Squarespace custom CSS covers browser-specific fixes.

Font Rendering

Safari renders fonts using macOS/iOS font smoothing, which makes text appear slightly thinner or lighter than Chrome. This is especially noticeable with light font weights (300, 400). If fonts look too thin in Safari, use -webkit-font-smoothing: antialiased; in Custom CSS to control the rendering. For font management, our guide to adding custom fonts to Squarespace covers cross-browser font rendering.

Video Autoplay

Safari restricts autoplay for videos more strictly than Chrome. Background videos and autoplay embeds may not start automatically in Safari unless they are muted. Squarespace's native background video sections handle this correctly (they autoplay muted), but manually embedded videos through Code Blocks may need the muted attribute added to the video tag.

Safari Editor Issues

Editor Performance

The Squarespace editor generally works well in Safari. If the editor runs slowly, close other Safari tabs, clear cache, and update to the latest Safari version. On older Macs, Chrome may provide a faster editing experience because of different JavaScript engine performance characteristics.

Drag-and-Drop in Safari

The Fluid Engine's drag-and-drop works in Safari but may feel slightly different from Chrome - different scroll behavior during drag operations and different snap feedback. If drag-and-drop feels unresponsive, try Chrome for the editing session. For Fluid Engine troubleshooting, our guide to Squarespace Fluid Engine not working covers editor issues.

Safari on iOS-Specific Issues

Mobile Safari Rendering

Safari on iPhone and iPad uses the same WebKit engine as desktop Safari but has additional restrictions - smaller viewport, touch-only input, reduced memory, and stricter autoplay policies. If your site looks wrong on iOS Safari specifically, check for Custom CSS without mobile media queries and embedded content with fixed pixel widths. For mobile troubleshooting, our guide to Squarespace mobile view not working covers responsive fixes.

iOS Scroll Behavior

iOS Safari handles scrolling differently from other browsers - particularly in iframes, overflow containers, and fixed-position elements. If embedded content or modal overlays do not scroll correctly on iOS, add -webkit-overflow-scrolling: touch; to the container CSS. For mobile optimization, our guide to Squarespace mobile optimization covers iOS-specific issues.

iOS Zoom on Input Fields

If form input fields on your Squarespace site cause the page to zoom in on iOS, the font size of the input is below 16 pixels. iOS Safari automatically zooms into inputs smaller than 16px. Fix: ensure all form field font sizes are at least 16px on mobile. For form optimization, our guide to Squarespace form customization covers mobile form usability.

Troubleshooting Process for Safari Issues

1. Test in Chrome. If the issue is Safari-only, it is a Safari-specific problem.

2. Clear Safari cache. Develop > Empty Caches (Mac) or Settings > Safari > Clear History and Website Data (iOS).

3. Disable content blockers. Check Safari settings for content blockers that may prevent scripts or resources from loading.

4. Check Custom CSS. Look for CSS properties that need -webkit- prefixes or behave differently in WebKit.

5. Check third-party scripts. Safari's privacy features may block cross-site resources that work fine in Chrome.

6. Update Safari. Ensure you are running the latest Safari version. Apple releases WebKit updates through macOS and iOS updates.

7. Test on iOS. If the issue is mobile-specific, test on an actual iPhone - iOS Safari has additional restrictions beyond desktop Safari. For design best practices, our Squarespace design tips guide covers cross-browser testing strategies.

Make Your Squarespace Site Work Perfectly in Safari

Safari-specific Squarespace issues come down to three things: privacy features blocking scripts, aggressive caching serving old content, and WebKit rendering differences from Chrome. Each has a specific fix - configure privacy workarounds, clear cache regularly, and add Safari-specific CSS where needed.

Test your published site in Safari every time you make significant changes. A large percentage of your visitors - especially on Mac and iPhone - use Safari as their primary browser. Making your site work perfectly in Safari is not optional.