Разница в высоте линии исправляется при увеличенном виде?

Question

У меня есть DIV и P, наложенные на один и тот же контент строки.

При обычном 100% -ном увеличении изображение отображается правильно, без разницы, но в Browser-Zoom 150% или Windows-Monitor-Zoom 150% есть разница в P-Tag.

Все строки в P-тэге НЕ отображаются в увеличенной высоте строки. Например: одна строка должна быть высотой 26 пикселей. 14 линий выборки должны составлять 14 x 26px = 364px по высоте вместе, но это только 360.89px в режиме масштабирования.

DIVs правильно увеличивают масштаб до 364 пикселей, а Ps только до 360,89 пикселей. Откуда эта разница и есть ли способ ее исправить?

Это происходит только в Google Chrome, не в Firefox и не в краю.

Пример кода: https://codepen.io/anon/pen/OrBqKN

#behind {
  color: black;
  position: absolute;
}

#behind div {
  height: 26px;
}

#behind, #front {
  font-size: 20px;
  line-height: 26px;
  font-family: monospace;
  padding: 0;
  margin: 0;
}

#front p {
    color: red;
    white-space: pre-wrap;
    margin: 0px;
}

<div id="behind">
  <div>test line</div>
  <div>next</div>
  <div>test line</div>
  <div>next</div>
  <div>test line</div>
  <div>next</div>
  <div>test line</div>
  <div>next</div>
  <div>test line</div>
  <div>next</div>
  <div>test line</div>
  <div>next</div>
  <div>test line</div>
  <div>next</div>
</div>
<div id="front"><p>test line
next
test line
next
test line
next
test line
next
test line
next
test line
next
test line
next</p>
</div>