Tämän videon aikaan CSS-Tricks-painikkeilla on faux 3D -efekti. Ne näyttävät siniseltä tiileltä, jota katsot ylhäältä kulmassa. Kun painat niitä alas, niiden: aktiivinen tila laukaistaan (kuten kaikki linkit / painikkeet / tulot) ja CSS siirtää ne alas ja oikealle, mikä näyttää siltä, että painat kirjaimellisesti kirjaimellisesti alas pintaan.
Mikä on ongelma? Kun siirrät tällaista elementtiä (tässä tapauksessa muunna translate(3px, 3px);:), muutat aluetta, jolla painallus laukaisee "click" DOM -tapahtuman. Jos painalluksen sijainti sattuu olemaan alueella, joka on nyt suurempi kuin "napsautettava" alue, se ei laukaise. Joten painiketta painetaan, mutta sitä ei koskaan paineta. Se on outoa, huono ja odottamaton käytös.
Vaikutus on silti edelleen siisti, joten tässä videossa korjaamme sen siirtämällä pseudoelementin täyttämään jäljellä olevan tilan, jolloin napsautettava alue on aina sama.