Stephen Pontes [.com]

The title won’t make sense unless you’re experiencing the issue.

I recently noticed that I had some weird behavior with input boxes in Safari (not sure if this affects other browsers). When horizontally resizing my window, the input box randomly decides to add a ton of padding below itself. We’re talking at least 50px of space here.

The issue boiled down to bad math. See if you can spot my mistake:

form {
	background-color: #d6dde5;
	width: 90%;
	margin: 20px auto;
	border: 0;
	text-shadow: #ffffff 0px 1px 1px;
	border: 1px solid #B7BDC4;
	padding: 1% 1% 1.5% 1%;
	}

form input {
	font-size: 1.25em;
	height: 1.5em;
	padding: 1%;
	width: 98%;
	border: 1px solid #999999;
	}

Catch it? The input is 98% wide, with 1% padding on all sides (top, right, bottom and left). This does add up to 100% of the space we allocated (98% of the form itself)….but I didn’t take the border of just 1 dang pixel around the inputs into consideration. This 1px border apparently wreaks havoc when dealing in percentages and caused the behavior I experienced.

Changing my css to read border: 0; fixed the issue.

Moral of the story: always double check your math.