Prefix Free? Maybe not for Now

UPDATE 2/20/16: This site has been redesigned since the original posting of this article. References to elements of the old design are no longer relevant, but the general idea is consistent.

I came across Lea Verou's outstanding -prefix-free (such a delighfully clever, ironic name) a while back. I put it to use in a few projects of mine, but ran into an interesting issue when I tried to leverage it on my own website.

Specifically I was trying to animate those little circles you see when you click the icon links at the top of this page. The circle itself is generated and animated with these CSS rules:

#contact .img-btn::after {
	display: block;
	width: 30px; height: 30px;
	opacity: 0;
	transform: scale(0.75);
	content: "";
	box-shadow: 0 0 0 3px #FFF;
	border-radius: 15px;

	transition: transform 115ms ease, opacity 120ms ease;
}

#contact .img-btn:active::after {
	opacity: 1;
	transform: scale(1.2);
}

Chrome fell short of IE10, Firefox, and Opera in handling the transform transitioning. The animation was skippy and caused the surrounding text to alias and translate.

I found a few hack fixes but none of them worked in my particular case. After spending a few fruitless hours, I chalked the issue up to a browser shenanigan. Simple (lazy?) fix: disable the -webkit-transform property!

I didn't take the time to add an exeption for this one particular CSS rule in -prefix-free. There are a few suggestions along this line on the -prefix-free FAQ that might have worked. However, since the library was overkill for my site anyway I just stopped using it.

I ultimately resolved the issue by creating a normalize.css file that mirrors the CSS rules of my site.css file wherever prefixes are needed. I keep the web standards rules in my site.css file and include it after normalize.css. This is to ensure that supported web standards properties will override the corresponding prefixed property.

I'm certainly not suggesting that you shouldn't use -prefix-free. Just wanted to point out an issue that I had to address.