Desfoque de texto no Chrome após a transformação: escala()

Nas atualizações recentes do Chrome, surgiu um problema peculiar onde o texto renderizado usando a transformação do CSS : a propriedade scale() parece borrada. Este problema foi observado ao usar este código específico:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Visitar rourkery.com no Chrome revela o problema na área de texto principal, enquanto outros navegadores WebKit (como Safari) parecem não ser afetados.

Uma solução para o enigma do texto desfocado

Para resolver esse problema, duas abordagens podem ser empregado:

1. Backface Visibility Hidden: Esta técnica corrige o problema simplificando a animação apenas para a frente do objeto, eliminando os estados padrão de frente e verso.

   backface-visibility: hidden;

2. TranslateZ: Este hack ativa a aceleração de hardware para a animação, resolvendo efetivamente o problema de renderização.

   transform: translateZ(0);

Além disso, alguns usuários acham benéfico adicionar a seguinte propriedade:

-webkit-font-smoothing: subpixel-antialiased;