Coding error fixed #2: Chrome not rendering page at full width

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s