This was driving me crazy for…well, probably since last weekend’s project. I was using my CSS from last weekend’s project in a test bed for this weekend’s project, and page elements that should have rendered at full screen width or full container width (approximately 960px) were rendering at 600px or 700px in Chrome. All appeared fine in Firefox.
I realized that the main html tag has all of these reserved classes automatically applied to them:
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
Last weekend, in my ignorance, I had named a div class video. This was the problem. Of course, there is no need for this div in this weekend’s project, and it would not have wound up in the actual project repo. It would’ve been a mystery to me why this was happening…and it is still a mystery as to why exactly this behavior occurred in Chrome and not Firefox, but there’s no time to look into this deeper.
Lesson learned: don’t use reserved classes
bullcitydave 