From b5fd3e7210cfbcb87015f3a5b8c3f25eab2a5715 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 13 May 2025 08:52:25 +0200 Subject: [PATCH] Fix comment textarea scroll issue in Firefox (#34438) In the comment editor, there is a bug in Firefox where the scroll position unexpectedly moves up, which is annoying. This is not reproducible in Chrome and Safari. To reproduce here are some steps: - Go into an editable issue - Scroll page to bottom - Focus the textarea and press Return many times, causing the textarea to get a scrollbar - Scroll page to bottom again - Press Return once more - Page should not scroll up. This fixes the bug by adding a temporary margin, and I verified it works in all browsers. Co-authored-by: wxiaoguang --- web_src/js/utils/dom.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts index 83a0d9c8df..8f758bf9ac 100644 --- a/web_src/js/utils/dom.ts +++ b/web_src/js/utils/dom.ts @@ -161,6 +161,7 @@ export function autosize(textarea: HTMLTextAreaElement, {viewportMarginBottom = function resizeToFit() { if (isUserResized) return; if (textarea.offsetWidth <= 0 && textarea.offsetHeight <= 0) return; + const previousMargin = textarea.style.marginBottom; try { const {top, bottom} = overflowOffset(); @@ -176,6 +177,9 @@ export function autosize(textarea: HTMLTextAreaElement, {viewportMarginBottom = const curHeight = parseFloat(computedStyle.height); const maxHeight = curHeight + bottom - adjustedViewportMarginBottom; + // In Firefox, setting auto height momentarily may cause the page to scroll up + // unexpectedly, prevent this by setting a temporary margin. + textarea.style.marginBottom = `${textarea.clientHeight}px`; textarea.style.height = 'auto'; let newHeight = textarea.scrollHeight + borderAddOn; @@ -196,6 +200,12 @@ export function autosize(textarea: HTMLTextAreaElement, {viewportMarginBottom = textarea.style.height = `${newHeight}px`; lastStyleHeight = textarea.style.height; } finally { + // restore previous margin + if (previousMargin) { + textarea.style.marginBottom = previousMargin; + } else { + textarea.style.removeProperty('margin-bottom'); + } // ensure that the textarea is fully scrolled to the end, when the cursor // is at the end during an input event if (textarea.selectionStart === textarea.selectionEnd &&