ScrollHeightがコンテンツで定義した高さより大きくなることがある

Question

問題点

textareaの高さと幅を動的に変化させるJavaScriptを作成しようとしています。

<textarea>を表示させる段階で、必要な高さと幅を計算して表示すれば、
定義範囲をはみ出さないように(オーバーフローせずに)表示できると考えたのですが、
予め決めたコンテンツの高さに余分な余白をつけた高さを、ブラウザが付加してしまい、
表示させるつもりがなかったスクロールバーが表示されてしまい、困っています。
(margin, border, paddingを0にしたとしても、です。)

文章での説明が難しいので、
実験的に以下URLにあるようなコードを作成しました。

margin, border, paddingを0にして、
コンテンツ表示域を100px、コンテンツの高さを200pxにしてわざとオーバーフローさせ、
その時のscrollHeightがいくつなのかを確認するものです。

CodePen Project のURLです

すると、以下画像のように、ブラウザによって付加する高さが、img要素とテキスト要素によって異なるようです。

Chrome ver68の場合

Firefox ver61の場合

ie ver11の場合

(Cope Penに対応していないためPJをダウンロードしてローカルで起動しています)

解決したいこと

1. このように余分な高さが付加される原因は何でしょうか？
2. 余分な高さを付加させないようにするには、どうしたらよいでしょうか？

よろしくおねがいします

補足

<textarea>の定義についてMDNの情報を調べてみたところ、
以下の内容を見つけました。

ベースラインの不整合

どうやら、<textarea>内にテキストをどのようにレンダリングするのかは、
ブラウザにより異なる(baselineの扱いがブラウザにより異なるという事は、テキスト1行が占有する領域の算出もブラウザにより異なる)ようです。
勝手な想像ですが、**「ScrollHeightの値もブラウザにより異なるのは、共通の仕様が無いから」**と思い始めました、、。
どなたか、この考えが正しいかどうかわかる方がいますかね、、？

とりあえずは、
「一旦<textArea>をレンダリングした後、
scrollheightを取得して<textarea>のheightより大きければ、scrollHeightの値でheightを再調整する」
という機能を組み込めば、期待通りの動作をする事はわかりましたが、
もっとスマートな方法は無いものでしょうか、、、、

Answer 1

1. について：原因（対策はyoshinaviさんの投稿をご参照ください。）

yoshinaviさんがおっしゃっているように、<img>はインライン要素です。
このため、ベースライン＝a, b, cなどの文字の下端と、画像の下端が一致するように描画されます。
一方、ベースラインより下にもはみ出すy, jなどの文字のため、ベースラインの下にも空間があります。
この空間が、画像の下の空白となって現れています。
（参考：https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image）

ベースライン下の空白の大きさが異なるのは、（少なくとも投稿にあるCodePenでは）フォントがブラウザごとに異なり、ベースライン下の空間も大きさが異なるためです。
CSSを少し変えて、

body {
     border: 1px solid black;
     font-family: Arial;
     font-size: 20px;
     line-height: 20px;
}

のようにフォントなどを指定すると、ChromeとFirefoxで、画像のscrollHeightは一致しました。

2. について
文字の下の空白＝ベースライン下の空白です。これが異なるのは、1. と同様の理由です。
ただし、font-family font-size line-heightを指定しても、ChromeよりもFirefoxのscrollHeightのほうが1ピクセル大きくなりました。
この点、ブラウザ間の微妙な差、ということかと思います…。

##追記（8月12日22:40）
質問に「補足」として書かれた、

「一旦<textArea>をレンダリングした後、scrollheightを取得して<textarea>のheightより大きければ、scrollHeightの値でheightを再調整する」

この方法でコンテンツの高さ（scrollHeightで取得）とtextareaの高さを同じにするのがいいかと思います。
こんなコードでしょうか。

var img = document.getElementById('imgTest');
var imgHeight = img.scrollHeight;
var imgWidth = img.scrollWidth;
img.style.height = imgHeight + 'px';
img.style.width = imgWidth 'px';

var txt = document.getElementById('txtAreaTest_textarea');
var txtHeight = txt.scrollHeight;
var txtWidth = txt.scrollWidth;
txt.style.height = txtHeight + 'px';
txt.style.width = txtWidth + 'px';

問題点は、このコードだと、

• Firefox→フォントを問わず期待通り動作
• Chrome→Arialなど一部フォントをfont-familyで設定した場合のみ、スクロールバーが出ます

（これに気がついたときは目から汗が…）

とりあえずの対処法として思いつくのは、

• Chromeでテストをして、期待通りに動作するフォントを選ぶ。ただし、Arlal、メイリオ、MS Pゴシックなどはだめでした。
• txtHeight + 'px'; → txtHeight + 20 + 'px'などとしてスクロールバーの高さ・幅＋αをtextareaの高さに足す

といったところでしょうか…。「いいかと思います」と言いながら申し訳ありません。

Comments

[IkazoIchikawa]

わかりやすい説明ありがとうございます

<textarea>要素でfont-familyとfont-sizeを指定しても、より上位要素のfont設定(ここを明示的に指定してあげないと、ブラウザ毎に異なる計算がされる)により、baseline下の空間(ディセンダというものでしょうか)が変わるという事ですね。

しかしそれだと<textarea>外で別のフォントを使用したいといった場合に、このフォントはOKだけどこのフォントはNGといった制限がかかってしまうので、、微妙ですね、、。

また、1pxとはいえ、「ブラウザ間の微妙な差」ができてしまうというのも、、
(1pxの計算違いで、15px程あるスクロールバーが表示されるかされないかが変わってしまう事になるからです)

「ベースラインの不整合」の説明を読む限り、<textarea>に対してvertical-alignは使用しないほうが良さそうですし、、、
、、やはりscrollheightの大きさはコンテンツのサイズによって、'ぴったりこの数字にする'ということは出来ない事として、対処療法を考えるしか無いのでしょうか、、

[code_ugoite]

><textarea>外で別のフォントを使用したいといった場合
→CSSで、textareaにのみfont-familyを設定すれば、bodyの他の部分と別のフォントが使えます。

>1pxの計算違いで、15px程あるスクロールバーが表示されるかされないかが変わってしまう
>scrollheightの大きさはコンテンツのサイズによって、'ぴったりこの数字にする'ということは出来ない
→この点、もとの投稿に書こうか悩んだところでもあったので、もとの投稿に追記しました。ご確認ください。

Answer 2

imgについては「インライン要素」なので、余白が気になるようであればdisplay:block;またはvertical-align:bottom;を追加してみてください。

テキストは、私の環境では余白は無いように見えます。
（Chrome:68.0.3440.106）

Comments

[IkazoIchikawa]

回答ありがとうございます

> imgについては「インライン要素」なので、余白が気になるようであれば
> display:block;またはvertical-align:bottom;を追加してみてください。

→`display:block;`を<img>に適用したところ、目的通り余白が表示されなくなりました。
　しかし`vertical-align:bottom;`は効果が無いようです。(環境により異なるのでしょうか、、)

> テキストは、私の環境では余白は無いように見えます。
> （Chrome:68.0.3440.106）

→ごめんなさい説明不足でした。
　Chrome68のテキスト表示に限っては、期待通り余白が表示されていなかったです。
　(画像にコメントを追加しておきました)

[yoshinavi]

＞「ScrollHeightの値もブラウザにより異なるのは、共通の仕様が無いから」

HTML4で一応は共通項目としてデフォルトのスタイルシートが存在しますが各ブラウザは個別の値を取っているのが多いです。最近はある程度は共通化していますが、全てでは無いので、どうしても揃える時は「リセットCSS」をまず適用させるしかないと思います。

参考までに
https://www.w3.org/TR/CSS2/sample.html