Gotcha of the Day: Can't paste into a text field in Chrome

A client of mine noticed an oddity about the HTML5/CSS template we were using for his site. When browsing with Chrome, pasting into text fields didn't work. You could cut and copy text, but not paste.

Naturally, it worked fine in IE and Firefox. At first, I assumed the behavior was due to some funky JavaScript - perhaps something related to the uniform jQuery plugin. But, removing that code made no difference.

After much head scratching and somewhat random poking, I realized the problem was being caused by a CSS directive. On the body tag, there was an innocuous class='login' declaration. And within the one of the CSS files was the following:

  /**
   * Login
   */
  body.login {
      height:0;
      overflow: hidden;
  }

Removing this chunk of code allows the paste functionality to work.

I suppose I can kinda sorta see what Chrome was doing: the body had no height, so why should you be able to paste into it?

In the end, I removed the code and everything behaves as normal.