When you run this snippet you will see the following (at least in Chrome 97.0.4692.71):
clientHeight and scrollHeight are more than is necessary for 1 line.line-height is undefined unless explicitly set. Setting line-height affects the initial clientHeight and scrollHeight values.clientHeight or scrollHeight. They appear to initialize with enough room for 2 lines.scrollHeight, as expected, but it doesn't equal textHeight.scrollHeight to increase but there are no line breaks added to the text (i.e. textHeight doesn't change).What are the calculations used to arrive at the clientHeight and scrollHeight values observed?
const textarea = document.querySelector('textarea');
document.addEventListener('DOMContentLoaded', () => {
resize(textarea);
});
textarea.addEventListener('input', (inputEvent) => {
resize(inputEvent.target);
});
function resize(o) {
const lines = getLines(o);
const fontSize = getCSSIntegerValue(o, 'font-size');
const padding = getCSSIntegerValue(o, 'padding');
const borderWidth = getCSSIntegerValue(o, 'border-width');
const textHeight = fontSize * lines;
console.log('fontSize=%d, lines=%d, padding=%d, borderWidth=%d, textHeight=%d, clientHeight=%d, scrollHeight=%d', fontSize, lines, padding, borderWidth, textHeight, o.clientHeight, o.scrollHeight);
}
function getCSSIntegerValue(o, property) {
const computedValues = window.getComputedStyle(o);
const propertyValue = computedValues.getPropertyValue(property);
return parseInt(propertyValue.replace(/\D/g, ''));
}
function getLines(o) {
const lines = o.value.split(/\r|\r\n|\n/);
return lines.length;
}textarea {
all: unset;
background-color: #ddd;
overflow-y: hidden;
overflow-x: hidden;
overflow-wrap: break-word;
font-size: medium;
}<textarea></textarea>