CSS Race Conditions

by Ben Creasy

Bottom line up front: be sure to always put your javascript after your CSS, or a race condition can cause inconsistent CSS rendering as observed in the Stackoverflow post Strange inconsistent rendering in Google Chrome. It appears as if this can happen even if the javascript does not change the CSS.

Best practice is to put your javascript at the bottom of the page right above </body>,[1] but in one project I tossed the handlebars.js partial for my Google Analytics in the head of my HTML. It was small and I figured it wouldn't be a big deal.[1:1]

Today, I loaded up a production website and found that the positioning was off and a div was being pushed a couple dozen pixels down. I refreshed and it went back to normal. I originally figured it had something to do with the cache, but after clearing the cache and refreshing dozens of times it was clearly happening every so often.

Inconsistency like that is prime evidence for a race condition in any program, but CSS is famously finicky so I spent a good amount of time fiddling with it before I made the right Google search and found the Stackoverflow post linked above.

  1. You can also get fancy with the HTML5 async attribute. ↩︎ ↩︎