search

atom / atom.io

🌐 A place for feedback on the atom.io website and package API
158 stars 98 forks source link

Pressing the very top of the download button does nothing #189

Closed xv closed 3 years ago

xv commented 4 years ago

Description

Because the download button uses transform: translateY(2px) to give it a "push" effect when pressed, putting the cursor at the very top of the button and pressing will not trigger <a href="blah"> even though, visually, the button is being pressed.

Steps to Reproduce

  1. Move cursor anywhere at the top of the button, but not outside of it.
  2. Press it.
  3. Press it again and again and again all you want.

problem

Expected behavior: The <a> tag of the button class should execute its href value.

Actual behavior: Nothing happens. Though the button looks like it's being pressed.

Reproduces how often: Every instance.

Versions

All latest versions of major desktop and mobile browsers produce this issue.

Additional Information

The solution is to simply transparently fill the gap created by the 2px Y translation of the button:

.welcome .welcome-button:active::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: -2px;
    left: 0;
}

solution

rsese commented 4 years ago

Thanks for the report! Reproduced on macOS 10.14.6 with Chrome 77.0.3865.90.