Weird behavior with form inputs that have custom focus styles rendering completely wrong/different in Chrome vs. Firefox.

Firstly, here's a JSFiddle link to the problematic form.

If possible, open the link in both Chrome and Firefox (as well as other browsers you may have) and click (focus) the input boxes.

Things of note:

INPUT BOXES

1. In Firefox, the input boxes seem to render the border correctly (no problem here)
2. Chrome seems to shrink the input boxes by about 2 pixels (problem)

TEXTAREA BOX

1. Firefox seems to resize the box exactly like Chrome does in the previous notes
2. Chrome does what Chrome does

Here's a forked version which adds:

textarea:focus { height:114px; width:447px } 

Oddly enough, it fixes the textarea issue in Firefox, but instead of shrinking in Chrome, it expands! Wut?

I don't know what to do. Please help.

THEORIES

1. My amateur coding skills have broken the browsers (high probability)
2. I'm forgetting something important (also high probability)
3. Why not both?

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted November 02, 2015 at 09:02AM by --lolwutroflwaffle-- http://ift.tt/1Si7acL