CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Simoroshka
Simoroshka

Reputation: 349

Difference in computed height in Firefox and Chrome

I have a div with text that uses a custom font, say, from google fonts. Font size is defined in pixels, and line height is defined. In Firefox the block's height is computed to be 476, while in Chrome it is 472.

http://jsbin.com/wezasekafo/1/edit?html,css,output

* {
  padding: 0;
  margin: 0;
}
div {
  font-family: "Roboto";
  font-size: 35px;
  width: 500px;
  line-height: 1.7;
  border: 1px solid;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">


<div>
  Lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text, lines of text,
  lines of text, lines of text

</div>

I am trying to understand what is going on there and if there is any way to deal with it.

Upvotes: 3

Views: 1232

Answers (1)

kukkuz
kukkuz

Reputation: 42352

Run the below snippet in Chrome & Firefox - you will get the height of a single line of text (minus the 2px contribution from the border) as:

  1. Chrome : 59

  2. Firefox : 59.5

var height = document.querySelectorAll('body > div')[0].clientHeight;
console.log(height);
* {
  padding: 0;
  margin: 0;
}
div {
  font-family: "Roboto";
  font-size: 35px;
  width: 500px;
  line-height: 1.7;
  border: 1px solid;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div>
  Lines of text
</div>

Note: Also see the difference in what javascript reports and what you see when you inspect the element

And theoretically the line height is:

35px x 1.7 = 59.5px

The demo in question has 8 lines - therefore:

  1. Chrome : 59px x 8 = 472px

  2. Firefox : 59.5px x 8 = 476px

This occurs due the the famed sub-pixel problems - the way browsers handle fractional pixels - see another example in this SO thread.

Upvotes: 3

Related Questions