Why is a div longer than several spans with the same content (only in Chrome)

Question

I have two lines of 10000 "." in a monospace font. The first has the whole line in a div, the second is made up of 1000 spans of 10 "."'s each. Here is the JS fiddle link: https://jsfiddle.net/fojp5e9z/2/

Here it is with 5000 characters, it is slightly noticeable at the end. At 10000 you get 2 full periods extra length on the top line.

<!DOCTYPE html><html><body>
<div style='font-family:monospace'>
........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
</div>
<div style='font-family:monospace'>
<span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span>
</div></body></html>

In Chrome, this first line is longer than the other, but in every other browser, the lines are the same length. Even adding normalize.css doesn't help.

Why is this happening and is there a way to fix it in chrome so the lines are the same length?

Temani Afif · Accepted Answer

I think this is due to some rounding and complex calculation. First, here is a better illustration of the problem using gradient to see the difference between both cases:

span:nth-child(odd) {
  background:green;
}
span:nth-child(even) {
  background:yellow;
}
.grad {
  background:repeating-linear-gradient(to right,green 0,green 5ch,yellow 5ch,yellow 10ch);
}
body {
  margin:0;
  font-family:monospace;
}

<div style='font-family:monospace;display:inline-block;' class="grad">
........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
</div>
<div style='font-family:monospace;display:inline-block;background:red;' >
<span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span>
</div>

We can clearly see that the top gradient is not following the coloration of the spans. I guess it's because the width of a monospace character (1ch) which is equal to 7.14063px (when testing with Chrome) make the calculation somehow different in both cases.

In the upper div we will sum this value 5000 times then we do the rounding BUT in the lower div will sum this value for each span (5 times) then we round then we will sum again and round again.¹

Of course, I don't have any formal proof of this but if we change the font-size to another value it will get fixed (changing the font-size will of course change the value of 1ch).

Here is an test when making the font-size:16px.

https://jsfiddle.net/1gLejzb3/20/ ²

As a side note, when testing on Firefox the 1ch is equal to 8px which explain why we don't have issue there since it's easy to deal with integers AND only chrome seems to work with non-integer values for the ch unit with fonts. So the same problem may also happen with other font-family.

In order to avoid such situations, better rely on a font that behave the same in all the browsers. For a monospace font I usually rely on Inconsolata. Its 1ch is by default equal to 8px in all the browser (even in chrome).

https://jsfiddle.net/1gLejzb3/23/ ²

With this font-family the 1ch unit will be equal to half the font-size so 16px will give 8px, 17px will give 8.5px (for Fierfox it will be 8px) and so on. If you avoid the odd values in chrome you won't have issues.

^{1: it's a simple guess as I don't know how the browser handle calculation in each case.}
^{2: I am using JSfiddle because I have reached the limit of character within an answer.}

Why is a div longer than several spans with the same content (only in Chrome)

Tags:

html

css

google-chrome

font-family

Charlotte

1 Answers

Temani Afif

Recent Activity

Donate For Us

Why is a div longer than several spans with the same content (only in Chrome)

Tags:

html

css

google-chrome

font-family

Charlotte

1 Answers

Temani Afif

Related questions

Recent Activity

Donate For Us