font-sizeでvw単位を使うと罫線がずれる

Question

前提・実現したいこと

フォントサイズをウィンドウ幅基準で可変にしつつ、
ノートのような罫線を付けたい

発生している問題

フォントサイズのpx変換結果が小数点だと、ずれる

該当のソースコード

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            padding: 20px;
        }

        .parent {
            background-color: red;
            line-height: 1.5;
            background-size: 100% 1.5em;
            font-size: 3vw;
            background-image: linear-gradient(
                transparent 0%,
                transparent calc(100% - 1px),
                green calc(100% - 1px),
                green 100%);
        }

        .child {
            background-color: blue;
            color: #fff;
        }

    <div class="parent">
        <span class="child">01あいうえお</span><br>
        02あいうえお<br>
        03あいうえお<br>
        04あいうえお<br>
        05あいうえお<br>
        06あいうえお<br>
        07あいうえお<br>
        08あいうえお<br>
        09あいうえお<br>
        10あいうえお
    </div>

試したこと

background-size: 100% 1.5em;だと小数点のときずれるので
小数点演算後1行の高さがどうなったか
javascriptで.childの高さのpx値を取得し、
background-size: 100% ★;の★に入れようと思った。
しかし1行目の上辺がそもそも親要素の上辺をわずかにはみ出ていたので失敗しました。
↓青の上辺が赤の上辺をわずかにはみ出てる

↑ウィンドウ幅：866px(わざと半端にして小数点を出している)

気づいたこと

chromeとfirefoxで挙動が異なりました。
今まではchromeでテストしてました。
firefoxではfont-sizeが小数点のときも罫線がずれませんでした。

chromeウィンドウ幅：866px

firefoxウィンドウ幅：866px

Answer 1

jQueryを使って文字の高さをpxで取得し、
それをline-heightとbackground-sizeの高さに適用することにしました。

    Math.trunc = Math.trunc || function (x) {
        return x < 0 ? Math.ceil(x) : Math.floor(x);
    }
    function underline() {
        var target = $('.parent');
        var get_line_height = 'get_line_height';
        var get_line_height_br = 'get_line_height_br';
        var set_line_height = 1.5;
        target.append('<br class="' + get_line_height_br + '"><span style="line-height:1em;" class="' + get_line_height + '">１行の高さ取得用</span>');
        //↓IE11用にcalc()で囲む
        var height = "calc( " + Math.trunc($('.' + get_line_height).outerHeight() * set_line_height) + 'px )';
        target.css("background-size", "100% " + height);
        target.css("line-height", height);
        $('.' + get_line_height).remove();
        $('.' + get_line_height_br).remove();
    }
    underline();
    $(window).resize(function () {
        underline();
    });

Answer 2

backgroundでの実装だとブラウザごとのズレを解消するのはかなり難しいと思います。
(CSS2以前のプロパティでは、小数点の扱いがブラウザごとにマチマチ)

JavaScript不要の別案を思いついたので、もし切り替える場合があるならご参考ください。

現状10行にしか対応していませんが、行数を増やす場合は50行くらい用意してoverflow: hidden;で隠す、
などすれば高さが増えても対応は可能と思われます。

CodePenでの実装

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  padding: 20px;
}

.parent {
  position: relative;
  background-color: red;
  line-height: 1.5;
  background-size: 100% 1.5em;
  font-size: 3vw;
  /*
  background-image: linear-gradient(
    transparent 0%,
    transparent calc(100% - 1px),
    green calc(100% - 1px),
    green 100%
  );
  */
}

.child {
  background-color: blue;
  color: #fff;
}

/* 追加 */
.line-group {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45vw; /* (lineの数 - 1) * 5vw */
  display: flex;
  flex-direction: column;
}
.line {
  margin-top: auto;
  margin-bottom: -1px; /* 高さ分を差し引く */
  width: 100%;
  height: 1px; /* 線の太さは変わらない */
  background: green;
  transform: translate(0, -0.5vw); /* 調整 */
}

<div class="parent">
  <div class="line-group">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  01あいうえお<br>
  02あいうえお<br>
  03あいうえお<br>
  04あいうえお<br>
  05あいうえお<br>
  06あいうえお<br>
  07あいうえお<br>
  08あいうえお<br>
  09あいうえお<br>
  10あいうえお
</div>

---

案2として、別案を考えてみました。こちらのほうがズレは抑えられるのでは、と思います。
HTMLは共通、CSSの下記部分のみ書き換えてみてください。

CodePenでの実装 - 案2

.line-group {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.line {
  width: 100%;
  box-shadow: 0 1px 0 0 green; /* 線の太さは変わらない */
}
.line::before {
  content: "　"; /* 全角スペース */
  font-size: 3vw;
  line-height: 1.5;
  color: transparent;
}

display: flex;で子要素にmargin-topを設定する..など工夫するアプローチよりも、
高さの計算として完全に同じ仕組みを用いることで「そもそもズレようがない」状態にできると考えます。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
いただいたソースを埋め込んだtest.html（codePen形式ではない）を、chromeのレスポンシブモードでウィンドウ幅を555pxにして表示してみたところ、罫線がずれてしまいました。

[new1ro]

解決したようで、遅くなってしまいましたが
透明な文字を表示することで「同じ仕組みなのでズレようがない」というような案を
思いついたので、回答に追記しておきますね。

[退会済みユーザー]

ありがとうございます！今から拝見させていただきます！

[退会済みユーザー]

拝見しました。box-shadowをつけるんですね！
可変する行数にどうやって対応するかも考えてみます！

[new1ro]

> 可変する行数にどうやって対応するかも考えてみます！

せっかくなので..、
泥臭くなってしまうのですが以下のようになると思います。

<div class="line-group">
<div class="line"></div><!-- 50個、100個くらい置く -->
</div>
----
.line-group {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; /* 追加 */
overflow: hidden; /* 追加 */
pointer-events: none;
}

[退会済みユーザー]

ご返信ありがとうございます。