Se, como eu, você tem que lidar com o desempenho em um dispositivo móvel em um site usando transições / transformação CSS3, pode ser uma boa ideia ter em mente estas dicas:
- Use
transform:translateZ(0);para acionar a aceleração de hardware. Se você usa uma fonte web personalizada, pense em aplicá-la também nela. Caso contrário, a fonte pode começar a piscar em qualquer transição em sua página. É devido a uma melhor renderização da fonte quando a renderização da GPU está ativada. - Use
transform-style: preserve-3d;. Diz ao navegador para não agir como se o interior do elemento ao qual você aplicou a transformação fosse plano, mas também precisa ser manipulado em um contexto 3D. Isso aumentará seu desempenho. - Use
backface-visibility: hidden;. Cada elemento que é colocado em um contexto 3D é, por padrão, renderizado como elemento 3D. Isso significa ter um backface. Se você não planeja animar os elementos de uma maneira que exiba sua face posterior, não deve carregá-los na memória do navegador.