Lebiediev Lebiediev - 1 year ago 88
CSS Question

CSS stops working in Chrome after opening console

I'm making an app with node.js and have a few html pages that are styled with one css file. After I click on a link (to a subpage) on the home page and open it in a new tab, everything seems fine. However, after I push ctrl+F12 and open the console, the css styles somehow 'stop working', which means:

  1. the elements are not styled, even though there is the link tag with style.css in 'Elements' tab in html

  2. In Network tab, I can only see style.css file with status 304 listed there (all other js files are not there, even though JS scripts work)

  3. When I return to the home page, the css styles are not visible as well (they were before new tab was open, now it's 304 status in Netwok). After refreshing, styles go back (along with status 200).

  4. After I refresh the subpage, everything is fine again, opening console does nothing to styles (Network tab shows all the files, including style.css with status 200). After closing/ opening console again, everything is okay too.

  5. If I dont't refresh the subage, the styles "come back" when I change window size (although not immediately, after a second). Otherwise there's just html with working js scripts.

This happens only in Chrome (version 53.0.2785.101), only after opening console for the first time. I have no clue why this might be happening.
Please help!

Answer Source

Ok, I managed to solve this. This issue seems to be Chrome bug, discussed for example here: https://bugs.chromium.org/p/chromium/issues/detail?id=647151 https://bugs.chromium.org/p/chromium/issues/detail?id=648023

I am not sure whether my solution is perfect, but it now it seems to work. I just added one option into express.static in my server.js (I use Express JS):

app.use(express.static('public', {maxAge: '5d'}));

I guess the max-age property is crucial here - it's specified in Cache-Control http header (you can see this in Dev Tools console in Network tab, after clicking on given file). Found this solution mentioned in the first link. If I see further issues, I will update this answer. I'm sorry I can't explain this problem in details.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download