Các nút trên CSS-Tricks, tại thời điểm video này, có hiệu ứng 3D giả. Chúng trông giống như một viên gạch màu xanh mà bạn đang nhìn từ trên cao ở một góc nghiêng. Khi bạn nhấn xuống chúng, trạng thái: active của chúng được kích hoạt (như tất cả các liên kết / nút / đầu vào) và CSS di chuyển chúng xuống và sang phải, xuất hiện như thể bạn đang nhấn viên gạch xuống bề mặt một chút.
Vấn đề là gì? Khi bạn di chuyển một phần tử như vậy (trong trường hợp này là biến đổi translate(3px, 3px);:), bạn đang thay đổi khu vực mà lần nhấn đó sẽ kích hoạt sự kiện DOM “nhấp chuột”. Nếu vị trí của báo chí đó xảy ra ở một khu vực hiện đã vượt quá khu vực “có thể nhấp” đó, thì nó sẽ không kích hoạt. Vì vậy, nút trông có vẻ được nhấn, nhưng thực sự không bao giờ được nhấn. Đó là hành vi kỳ lạ và tồi tệ và bất ngờ.
Mặc dù vậy, hiệu ứng vẫn rất tuyệt, vì vậy trong video này, chúng tôi khắc phục bằng cách di chuyển một phần tử giả để lấp đầy khoảng trống bị bỏ lại, làm cho khu vực “có thể nhấp” luôn giống nhau.