3

I am experiencing a strange issue with a page built with Twitter Bootstrap. After the page is loaded, and then a period of inactivity, clicking a link to another page or refreshing the current page will cause the page to load with no CSS styles. This issue appears to be limited to Chrome, but not sure.

To reproduce, in Chrome:

  1. Go to: http://jis.nashville.gov/
  2. After the page loads, wait approximately 1 minute.
  3. Click the logo.

Thanks in advance for any help offered...... C

Christopher Crisis
  • 185
  • 14
  • With chrome it really does happen. I had the console log open and didn't have an error. This is odd indeed – Alkis Kalogeris Jun 19 '13 at 17:30
  • I tried refreshing it (index.html) and it persists in this odd behavior. Something is happening with the cache I think. – Alkis Kalogeris Jun 19 '13 at 17:34
  • Not sure what is up? My load order for CSS and scripts appears correct. Other than that, it is just a static html page. Thanks for looking.... Any suggestions are appreciated. – Christopher Crisis Jun 19 '13 at 18:27
  • This seems like a server issue. For some reason your CSS files are not being loaded. – Scott Simpson Jun 19 '13 at 20:25
  • Thanks Scott, but the majority of my css is loaded from CDNs...also this issue seems to be isolated to Chrome on desktops. I cannot seem to reproduce the issue in other browsers, or even in Chrome on tablets/devices? – Christopher Crisis Jun 19 '13 at 21:35
  • this looks like a caching issue. To confirm, open up chrome dev tools and disable caching (Settings->Disable Cache). Once you do this, the page loads fine. – gurch101 Jun 20 '13 at 00:30
  • Thanks gurch101, any suggestion as to how I might deal with this for visitors to our site who use Chrome? Very peculiar, I don't have this issue with any other site? – Christopher Crisis Jun 20 '13 at 13:13
  • This does seem to be related to Chrome's caching. It seems that upon refresh, Chrome pulls from local cache for some files, but for some reason my jis.css is not cached by Chrome, anyone have a clue why that might be? The file is valid. – Christopher Crisis Jun 20 '13 at 14:18

1 Answers1

0

Ok, I have solved this issue, but am not sure if this answer is the best approach.

I found a related post where a time stamp is added to the file so that the browser is forced to reload each time.

I still have questions, such as, why did I have to do this for this one instance? We have many many sites, and this is the only instance where I had to do this?

Here is the code:

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=filemtime('style.css')?>" />

Here is the related post that provided the answer:

Browsers won't read updated CSS

Community
  • 1
  • 1
Christopher Crisis
  • 185
  • 14