From 58593ffb4e4772efb16df96b96dd27667c1b56c0 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 4386d386327bb..cb40851122357 100644 --- a/web_src/js/utils/dom.ts +++ b/web_src/js/utils/dom.ts @@ -168,6 +168,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(); @@ -183,6 +184,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; @@ -203,6 +207,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 &&