Be wary of CSS filters

Today I set out to diagnose an issue with really slow/clunky scrolling of an element within a page. The contents were just a simple ul/li group with three elements inside each li. This perplexed me so I started doing page profiling in chrome and ruled out any unknown Javascript handlers running onscroll. Eventually, through a process of elimination, I found that removing a CSS property of -webkit-filter: grayscale(100%) dramatically improved scrolling of the container (40+ fps). The odd part is that the elements this applied to are outside of the scrolling container. The container however does appear over top the grayscaled elements. I moved the container with dev tools so that the paint box was completely above the grayscaled elements. This improved scrolling slightly, from 6fps to around 10fps. This of course is still not sufficient, so for now I'm just removing the property altogether.

This issue affected desktop Chrome as well as iPad browsers. A fellow developer however had tried scrolling with Chrome on his Android phone and it worked great as it was. The filter property is supposedly supported in Chrome mobile 35 (which he's running) so I still can't explain that.