Hoje me propus a diagnosticar um problema com a rolagem muito lenta / desajeitada de um elemento em uma página. O conteúdo era apenas um grupo ul / li simples com três elementos dentro de cada li. Isso me deixou perplexo, então comecei a fazer o perfil de página no Chrome e descartei qualquer manipulador de Javascript desconhecido executando onscroll. Eventualmente, por meio de um processo de eliminação, descobri que remover uma propriedade CSS de-webkit-filter: grayscale(100%)melhorou drasticamente a rolagem do contêiner (40+ fps). A parte estranha é que os elementos aos quais isso se aplica estão fora do contêiner de rolagem. O contêiner, entretanto, aparece acima dos elementos em escala de cinza. Mudei o contêiner com ferramentas de desenvolvimento para que a caixa de tinta ficasse completamente acima dos elementos em escala de cinza. Isso melhorou um pouco a rolagem, de 6 fps para cerca de 10 fps. É claro que isso ainda não é suficiente, então, por enquanto, estou apenas removendo a propriedade por completo.
Esse problema afetou o Chrome para desktop e também os navegadores do iPad. Um colega desenvolvedor, entretanto, tentou rolar com o Chrome em seu telefone Android e funcionou muito bem como estava. A propriedade de filtro é supostamente suportada no Chrome mobile 35 (que ele está executando), então ainda não consigo explicar isso.