Safari not executing JavaScript on live website

Other Questions JavaScript
1

JavaScript Issue on Safari in Production Environment

I’m facing a weird problem with my website. The JavaScript works fine on Chrome both locally and on the live site. But when I open the site in Safari, the scripts don’t run. At first, I thought it was a Safari setting, but that’s not the case. The scripts work locally on Safari, just not on the live site.

I’m using Rails with jQuery Turbolinks. Here’s a snippet from my main JS file:

$(document).ready(function() {
  var copyBtn = new CopyTool($('#copy-btn'))
  var shareBtn = new CopyTool($('#share-btn'))
  
  $('.action-btn').hover(
    function() { $(this).addClass('hover-state') },
    function() { $(this).removeClass('hover-state') }
  )
  
  $('.action-btn').click(function() {
    $(this).addClass('clicked')
    setTimeout(() => $(this).removeClass('clicked'), 100)
  })
})

I’ve tried recompiling assets, but it didn’t help. Any ideas what could be causing this Safari-specific issue in production?

2

Hey there! I’ve dealt with similar Safari issues before, and it can be really frustrating. One thing that helped me was checking the Content Security Policy (CSP) headers. Safari can be super picky about these.

Try opening the developer tools in Safari (Option + Command + I) and look at the Console tab when loading your site. Any CSP violations will show up there. You might need to tweak your CSP settings to allow your scripts to run properly.

Another thing to check is your asset pipeline. Sometimes production environments can mangle scripts in ways that Safari doesn’t like. Make sure all your JS files are being included correctly and aren’t getting blocked.

If those don’t work, try clearing Safari’s cache and website data. Go to Preferences > Privacy > Manage Website Data and clear everything. It’s amazing how often this fixes weird browser issues.

Hope this helps! Let us know if you figure it out.

3

Have you checked your Content Security Policy (CSP) settings? This could be the culprit, especially if it’s working locally but not on the live site. Safari can be particularly strict with CSP enforcement.

Try inspecting the Network tab in Safari’s developer tools when loading your site. Look for any blocked resources or CSP violations. You might need to adjust your CSP headers to allow necessary scripts.

Also, double-check your asset pipeline. Sometimes, fingerprinting or minification can cause issues in production that don’t show up locally. Ensure all your JS files are being properly included and aren’t being blocked.

Lastly, consider using feature detection instead of browser detection in your scripts. This can help avoid browser-specific issues and make your code more robust across different environments.

4

yo, have u checked ur browser console for errors? sometimes safari can be a real pain with js. might be worth lookin at ur CSP headers too, they can mess things up. also, make sure ur js files are loading properly in production. safari’s dev tools can help spot issues. good luck!