line-height are not the same between divs when copied with javaScript

Question

I found this issue which looks to me like a Chrome bug. Interested if others have crossed this one in the past, and if there's any good solution / workaround for it.

The issue: when I copy font-size and line-height from one div to an other, they won't look the same: Line-height will seem to differ. Please see Codepen link in the bottom.

How to reproduce: Create two divs or textareas with classNames ta-source and ta-target, and add css for only the first one:

.ta-source{font-size: 1.4rem;line-height:1.42857}

Insert some multiline text in both, and then add javascript which copies these two properties to the other, so they would match in style:

var lh = window.getComputedStyle(document.querySelector(".ta-source")).lineHeight
var fs = window.getComputedStyle(document.querySelector(".ta-source")).fontSize

document.querySelector(".ta-target").style.lineHeight=lh;
document.querySelector(".ta-target").style.fontSize=fs;

That's about it, the two line-heights will seem to differ. Interestingly the issue with other line-heights won't occur, like line-height:1.42354. Issue on Firefox or Safari doesn't occur either.

Anyone came across this issue before?

Issue on Codepen: https://codepen.io/anon/pen/gVMeVw

var lh = window.getComputedStyle(document.querySelector(".ta-source")).lineHeight
var fs = window.getComputedStyle(document.querySelector(".ta-source")).fontSize

document.querySelector(".ta-target").style.lineHeight=lh;
document.querySelector(".ta-target").style.fontSize=fs;

.ta-target,.ta-source{height:200px;white-space:pre-wrap;float:left}
.ta-source{font-size: 1.4rem;line-height:1.42857}

<div class="ta-source">
  this
  is
  a
  simple
  multi
  line
  text
  where
  lines
  dont
  align
  with the other one
</div>
<div class="ta-target">
  this
  is
  a
  simple
  multi
  line
  text
  where
  lines
  dont
  align
  with the other one
</div>

Answer 1

Let's do some math:

You set on .ta-source font-size on 1.4rem, considering that the root element has font-size to 16px, the font-size of 1.4rem will correspond to 22.4px;

on .ta-source you also set line-height:1.42857,when line-height is defined as a unit-less number, the rule is the number will be multiplied with the current font size to set the line height; the current font-size is 22.4px, so it's equivalent to 31,999968px.

Now, when you get

var lh = window.getComputedStyle(document.querySelector(".ta-source")).lineHeight
var fs = window.getComputedStyle(document.querySelector(".ta-source")).fontSize

you receive two rounded numbers in px: you don't receive for lh nor 1,42857 neither 31,999968px, but 32px and for fs you don't get the measure in rem but in px, 22.4px. These measures are applied to ta-target, and I would even say correctly.

The differences, indeed, are on ta-source and in the way the line-height of 1.42857 equivalent to 31,999968px is rendered: some browsers rounds up, others down. Chrome rounds it down, Firefox rounds it up; Chrome rounds it to 31px, FIrefox to 32px (try to set in Chrome line-height on .ta-source to 32px, everything will align!).

So, the problem lies is the subpixel rendering problems. You will find tons of articles on google.