Button Dynamic Padding/Height Issue on Mobile

For some reason button elements have extra "padding" or "height" when compared to other elements with the same value if the value is not fixed but dynamic.

I have verified the issue myself in Chrome and Safari on iOS, and one of my friends verified the issue in Chrome on Android.

A. Fixed value for padding

span, button {
  padding: 16px;
}

The height of the button on the right is 1px more, but both elements are otherwise equal according to a console log, which actually seems to be the case.

Here is the codepen.

B. Dynamic value for padding

span, button {
  padding: calc(var(--gap) / 2);
}

@media screen and (min-width: 0px) {
  html {
    --gap: calc(10px + (40 - 10) * (100vw - 0px) / (1200 - 0));
  }
}

Clearly the button on the right is much taller than the span element on the left, even though console says they're basically equal, and the exact same value has been applied to both elements...

Here is the codepen.

• The only difference between A and B is that B doesn't use a fixed value.

• This odd behavior can be observed on both iOS and Android.

• Setting appearance to none before styling has no effect.

• Everything works as expected on desktop browsers.

Does anybody know what is going on here?

---

Updates

Applying a line-height: 1.15 and margin: 0 to the button element reduces the discrepancy.

Oddly, console claims the span element is still 1px wider (and 2px taller), even though they're effectively the exact same width if you overlay the two elements.

The text of the span element is 1px or 2px lower than the text in the button element, which makes sense because the span is 1px or 2px taller.

button {
  ...
  margin: 0;
  line-height: 1.15;
}

Here is the codepen.

I would just add a pixel or two to the button height, but unfortunately the height of many elements on my website is determined by a combination of a dynamic font-size and padding. And I'd rather not have to constantly run a bunch of JS in the background to dynamically calculate the height for every element on the fly.

from Button Dynamic Padding/Height Issue on Mobile