I'm currently troubleshooting the user experience on a website and running into a frustrating issue with Mobile Safari. It seems like the browser is caching my CSS files for days, and the only way I can get the latest versions is by using private browsing mode. I'm using WordPress with the WP Fastest Cache plugin and Plesk for my server setup. I've already disabled CSS minification in the caching plugin, but since private mode loads the latest CSS correctly, it feels like it's a problem specifically with how Safari handles caching. I've also tried adding a version number to my CSS file links but it doesn't seem to help. Any suggestions on how I can get Safari to refresh the cached styles?
5 Answers
A workaround that I’ve found helpful is to enable airplane mode on your device while loading the webpage. When it fails to connect, turn off airplane mode and reload the page. This can sometimes trigger Safari to fetch the latest resources instead of relying on its cache.
One approach that can help is to implement a cache buster in your CSS files. This means appending a query string to the file URL which changes whenever you update the CSS, forcing the browser to load the new version instead of the cached one. Additionally, make sure to review your cache policy settings to ensure they’re configured correctly.
Are you seeing the version number in your HTML and network tab? If yes, double-check that the CSS file is actually updated on the server. If the changes aren’t reflected even after purging your cache, it might be time to switch your caching plugin because it might not be functioning properly. If you’re working on a production site, consider temporarily disabling caching while you debug to make sure everything is functioning without interference.
Make sure to set explicit cache expiration in your .htaccess file. This sometimes helps in not having Safari hold onto the old versions for too long. It’s worth checking if your configurations are optimal on that front!
Mobile Safari can really cling to cached files. Just changing the version number might not cut it. I’ve had success completely renaming the CSS file while working on changes, which makes the browser treat it as a new resource. Also, don’t forget to check if your server or any intermediate caching layers are still serving the old file; it’s often a mix of Safari’s behavior and some caching settings that hold onto an outdated version.
I recommend WP-Rocket as a caching solution. We consistently use it without any issues. As a last resort, you can modify the version number in style.css to force a reload of the new stylesheet. Also, ensure that 'Disable Caching' is checked in the Network tab of your Dev Tools.