A website I’m working on seemingly randomly stops loading pages (showing only a white page) and images (showing only the blue question mark, but with the placeholder already in the right dimensions).
When it does so it gives a ‘Status 403, not modified’ message in the web inspector. In the case of this being a page, it has only loaded a few bytes and I cannot choose ‘show source’ from the developer menu. When I hit ‘reload’ the page is there in an instant, as if being cached already. This also happens right after I clear my cache and the error manifests itself on the first page I try to load.
Usually this happens when I click on a link while the page hasn’t finished loading yet. In the timeline I see that while the url is already set to the new page, Safari is still loading all kinds of stuff from the old page and kind of times out when finally trying to load the new page.
In the case of images not displaying correctly it does indicate that they are loaded (there are no errors displayed in the ‘resources’ overview). Also, after a reload, everything is there.
I googled a lot and it seems many people already for many years are having trouble with Safari and images not being fully loaded or pages displaying as just a blank page. Nonetheless the websites which are mentioned in those questions and complaints are showing up fine on my Safari (Ebay is mentioned a lot, as well as google images).
I tried many different things like preloading, lazy loading (setting the src to the data-src when the image should be displayed), reloading (setting the src to itself after the image is displayed). Also, it doesn’t seem to make any difference when I turn of caching in the Safari developer menu. I did not try any of the DNS solutions which are given on the Apple forums since I want to solve this problem on the code-end of things.
When you look at my js you’ll see there is some resizing and lazy loading going on. Even when I turn off all of these things the problem persists. I realize the images are quite heavy (almost all of them above 500kb) – I still hope there would be a solution regardless of the image size, since the content is not something I will have full control over in the future.
The page:
http://www.alique.nl/archive
You’ll have to click on the thumbnails and browse through the images to see the error. Since it happens on random pages (at least seemingly) I cannot point to a more specific page.
This is the js file:
http://www.alique.nl/js/lib.js
I solved the problem by removing the combine script I use to combine all my .css and .js files:
http://rakaz.nl/projects/combine/combine.phps
I’m not sure why this solved it – I did not change anything to any of the .css or .js files themselves. And basically the combine script just pasts all files together in 1 big new file and doesn’t add anything new to the existing files.
It also doesn’t really make sense to me that the error occurred so randomly: not on every installation of Safari, and not always on the same pages or with the same pictures. Turning off caching in .htaccess did change something (it made it work on more computers, but not on all though), but affected other images on the age that weren’t in trouble before (like the logo, it would’t load on random pages).
It seems there is definitely a strange issue with caching & Safari. For anyone who came here with a similar problem I would advice to turn off anything which even remotely has anything to do with caching (als gzip and things like that) to find out what causes the problem.