Button height glitch - 1px displacement when pressed

[neoneye]

On the examples page, in the section Components -> Button.

When pressing Click me, then the button is displaced by 1px vertically. Causing the content below the button to move by 1px. It looks like a glitch.

Not clicked

Clicked

Environment

macOS Monterey 12.6 - Firefox 106.0 (64 bit) macOS Monterey 12.6 - Chrome 106.0.5249.119 (Official build) (arm64)

[curtgrimes]

So I spent more time than I should have looking at this one and it looks like it might be tricky one to solve without undoing #44 or having some other downside.

This fixes for me it in Chrome and Firefox on macOS:

diff --git a/style.css b/style.css
index 3c50f8d..da3b4b5 100644
--- a/style.css
+++ b/style.css
@@ -152,7 +152,14 @@ button:not(:disabled):active,
 input[type="submit"]:not(:disabled):active,
 input[type="reset"]:not(:disabled):active {
   box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
-  padding: 2px 11px 0 13px;
+
+  /* Make the text to appear to shift down and right 1px without affecting any
+  surrounding layout */
+  vertical-align: -1px;
+  margin-bottom: -1px;
+  padding: 1px 0 0 2px;
+  position: relative;
+  top: -0.5px;
 }

 @media (not(hover)) {

The hard part is "undoing" the added vertical height when we add 1px of top padding. I am able to undo it with a combination of vertical-align: -1px and margin-bottom: -1px; to get the layout underneath from shifting due to a changed height, but I'm not entirely sure why I need both. Then to visually keep the button aligned vertically I do position: relative; and top: -0.5px;.

But I don't exactly understand why I had to use a 2px value for something on the horizontal axis and a half pixel value for something in the vertical axis to make the :active state line up visually with the non-:active state. If someone could explain why I'd love to know. I suspect it has something to do with the widths of the lines that make up the font's letters. I tested on macOS and Edge on W11.

The only problem I see with this is that it appears a half pixel higher in Safari:

If we can't think of a solution and we're okay with that downside, I'm happy to make a PR.

[curtgrimes]

I went ahead and opened https://github.com/jdan/98.css/pull/146 if we are okay with this solution. Thanks!

[neoneye]

Looks good to me, however I'm no css-expert.

I'm a fan.

[juanigaray]

Looks like this is solved by this pr. Closing as solved!