From d33021773c7cacfe6c34f55581ed55bc4b521850 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Tue, 5 Feb 2019 23:15:47 +0200 Subject: [PATCH] Fix up textarea growing to avoid rounding issues in Chrome --- client/css/style.css | 2 +- client/js/lounge.js | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 326c42ff..9bfe5149 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1983,7 +1983,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ min-height: 19px; /* Required when computing input height at char deletion */ height: 19px; max-height: 95px; /* min-height/height x number of lines maximum */ - line-height: 19px /* should match height */; + line-height: 19px; /* should match height */ outline: none; margin: 5px; padding: 0; diff --git a/client/js/lounge.js b/client/js/lounge.js index fb5ec550..1167af3a 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -82,23 +82,22 @@ $(function() { }); function resetInputHeight(input) { - input.style.height = input.style.minHeight; + input.style.height = ""; } const input = $("#input") .on("input", function() { const style = window.getComputedStyle(this); + const lineHeight = parseFloat(style.lineHeight, 10) || 1; // Start by resetting height before computing as scrollHeight does not // decrease when deleting characters resetInputHeight(this); - this.style.height = Math.min( - Math.round(window.innerHeight - 100), // prevent overflow - this.scrollHeight - + Math.round(parseFloat(style.borderTopWidth) || 0) - + Math.round(parseFloat(style.borderBottomWidth) || 0) - ) + "px"; + // Use scrollHeight to calculate how many lines there are in input, and ceil the value + // because some browsers tend to incorrently round the values when using high density + // displays or using page zoom feature + this.style.height = Math.ceil(this.scrollHeight / lineHeight) * lineHeight + "px"; chat.find(".chan.active .chat").trigger("keepToBottom"); // fix growing });