iOS7-bug: Shows white page when getting 304 Not Modified from server
It seems like after Apple upgraded almost every line of code in the iPhone they also introduced a bug regarding browser cache in Safari.
If your site takes advantage of the
ETag headers, you will probably run into this problem as well.
The iPhone will send a
If-None-Match header. The problem appears when the page is interrupted or cancelled during loading. In this case, it seems it will store an incomplete cache entry in the browser cache.
On the next request, it will try to read from cache, find a
ETag entry and send an
If-None-Match header. The server correctly responds with a
304 Not Modified, and the browser attempts to serve the page from cache. Unfortunately, the cache entry is incomplete and the result is a blank/white page.
There are multiple ways of cancelling the request; poor connection, double taps on the refresh button etc. See the YouTube-video for a demonstration.
The problem exists in the latest iOS7 at the time of writing (7.0.2) and has existed since the beta.
This is how we fixed the problem at VG
In front of all our web servers we use Varnish. Varnish handles every end-user request, asks the backend and caches the content. To ensure that iOS7-users does not end up with blank pages, we have to deliver a
200 OK even where a
304 Not Modified would be the correct response. To do this, we created a Varnish rule which removes the
If-None-Match headers on request and then have Varnish deliver the content as normal. This rule only applies to iOS7-devices, since this is where we know the problem exists.
We made a short video illustrating the problem below:
Hopefully, Apple will push an update that fixes this problem soon so we can remove the workaround and optimize the loading of our websites.