Knapperne på CSS-Tricks på tidspunktet for denne video har en faux 3D-effekt. De ligner en blå mursten, du ser ovenfra i en vinkel. Når du trykker ned på dem, udløses deres: aktive tilstand (som alle links / knapper / input), og CSS bevæger dem ned og til højre og ser ud som om du bogstaveligt talt trykker mursten lidt ned i overfladen.
Hvad er problemet? Når du flytter et sådant element (i dette tilfælde transformer translate(3px, 3px);:) ændrer du det område, hvor det tryk vil udløse "klik" DOM-begivenheden. Hvis placeringen af denne presse tilfældigvis er i et område, der nu er overdimensioneret af det "klikbare" område, udløses det ikke. Så knappen ser ud at være trykket, men bliver aldrig faktisk trykket på. Det er underligt og dårligt og uventet opførsel.
Effekten er dog stadig sej, så i denne video løser vi den ved at flytte et pseudo-element for at udfylde den plads, der er tilbage, hvilket gør det "klikbare" område altid det samme.