Tuesday, February 11, 2014

How to KILL Performance in Chrome 34 dev channel with one CSS rule

I just accidentally discovered a sure-fire way to KILL performance in Chrome 34 dev. I mean, going from a decent 30-60 fps to 0.25-1 fps.

See link below for sample code.

On a page with a good number of input elements (like a management dashboard I'm working with), apply "border: dotted 1px rgba(200, 200, 200, 0.9);" to input elements. It's the combination of the INPUT, element, border-style:dotted and border-color:rgba(). Remove the dotted (use solid) or remove the alpha channel and use rgb() instead and performance returns.

Even after the page is fully rendered and I scroll a few times, which causes things to smooth out a bit, dev-tools is rendered useless.

A sample page can be found here: https://github.com/rainabba/miscCode/blob/master/Chrome34KillPerfUsingInputs


Post a Comment