2

I discovered a strange sizing phenomenon. The <input> element in the following snippet results in different height with Chrome and Firefox only with font-family:Roboto and font-size:14px.

When I set the font-size to 15px or use a different font, everything seems to be alright and it stays at height:35px

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
  <style>
    input {
      font-family: Roboto;
      font-size: 14px;
      padding: 8px;
      border: 1px solid black;
      margin: 0;
    }
  </style>
</head>

<body>
  <input type="text" value="this is a test" />
</body>

</html>

13" MacBook Pro (2017 - Mojave 10.14.2):

  • External 25" Dell U2518D Screen:
    • Firefox: height:35px
    • Chrome: height:34px
    • Safari: height:34px

15" HP Windows 10 Notebook:

  • Chrome: height:35px
  • Firefox: height:35px
  • Edge: height:34.8px

Can somebody explain the 1px difference between Chrome and Firefox on the Mac? Or the 1px difference between Chrome on Mac and Chrome on Windows?

And why does it only happen with a 14px font-size?

EDITED: Tried to clarify the question

Joshua Wirth
  • 21
  • 2
  • inputs have top and bottom padding by default - this may cause it to be a different height to the p based on the font size (but I'm not entirely sure if you are asking about a difference in height between the elements or between the browsers - your question is not very clear) – Pete Jan 14 '19 at 13:09
  • well, we have less than 0.5px of difference ... It can simply be a difference in rendring which is logical since browser aren't the same – Temani Afif Jan 14 '19 at 14:05
  • "Firefox" vs "Chrome on Mac" and "Chrome on Mac" vs. "Chrome on Windows" have 1px difference. I tried to clarify the question above. – Joshua Wirth Jan 14 '19 at 14:41

0 Answers0