Não misture posição: fixa com transformações CSS

No Webkit, isso pode levar ao desastre. Eu encontrei esse problema no Chrome20.

Vou tentar reduzir os cenários que encontrei. (Isenção de responsabilidade: não testei esses isoladamente.)

Cenário um

.nav { -webkit-transform: translate3d(0,0,0); }
.nav ul { position: fixed; top: 0; left: 0; }

Seu efeito pretendido é fixar o ulno canto superior esquerdo da janela de visualização, mas, neste caso, será no canto superior esquerdo do .navpor causa da transformação CSS.

Cenário dois

.nav { -webkit-transform: translate3d(0, 0, 0); position: fixed; }
.nav iframe { ... }

Se você tiver um iframe(como um botão de curtir do Facebook ou Twitter) dentro do .nav, não será possível clicar nele.

Links