From 86e9c1142f573ca61d84e8c0ea80a7840bada1c4 Mon Sep 17 00:00:00 2001 From: Moksh Kimta Date: Fri, 1 Aug 2025 17:05:55 +0000 Subject: [PATCH 1/2] fix: prevent collapse scroll jump in Firefox (#41562) --- js/src/collapse.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/js/src/collapse.js b/js/src/collapse.js index b308863f46..96159df8dd 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -115,7 +115,6 @@ class Collapse extends BaseComponent { let activeChildren = [] - // find active children if (this._config.parent) { activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES) .filter(element => element !== this._element) @@ -145,6 +144,15 @@ class Collapse extends BaseComponent { this._addAriaAndCollapsedClass(this._triggerArray, true) this._isTransitioning = true + // 🔧 Firefox scroll jump fix + const isFirefox = navigator.userAgent.toLowerCase().includes('firefox') + let originalScrollMarginTop = '' + + if (isFirefox) { + originalScrollMarginTop = this._element.style.scrollMarginTop + this._element.style.scrollMarginTop = '0px' + } + const complete = () => { this._isTransitioning = false @@ -153,6 +161,11 @@ class Collapse extends BaseComponent { this._element.style[dimension] = '' + // ✅ Restore original scroll-margin-top + if (isFirefox) { + this._element.style.scrollMarginTop = originalScrollMarginTop + } + EventHandler.trigger(this._element, EVENT_SHOWN) } From f32ec6d1eba364c9bbef0aa5fae4dbdd53863796 Mon Sep 17 00:00:00 2001 From: Moksh Kimta Date: Fri, 1 Aug 2025 17:09:35 +0000 Subject: [PATCH 2/2] fix: prevent collapse scroll jump in Firefox (#41562) --- js/dist/collapse.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/js/dist/collapse.js b/js/dist/collapse.js index cce32d1c15..4eda783d66 100644 --- a/js/dist/collapse.js +++ b/js/dist/collapse.js @@ -99,8 +99,6 @@ return; } let activeChildren = []; - - // find active children if (this._config.parent) { activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES).filter(element => element !== this._element).map(element => Collapse.getOrCreateInstance(element, { toggle: false @@ -122,11 +120,24 @@ this._element.style[dimension] = 0; this._addAriaAndCollapsedClass(this._triggerArray, true); this._isTransitioning = true; + + // 🔧 Firefox scroll jump fix + const isFirefox = navigator.userAgent.toLowerCase().includes('firefox'); + let originalScrollMarginTop = ''; + if (isFirefox) { + originalScrollMarginTop = this._element.style.scrollMarginTop; + this._element.style.scrollMarginTop = '0px'; + } const complete = () => { this._isTransitioning = false; this._element.classList.remove(CLASS_NAME_COLLAPSING); this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW); this._element.style[dimension] = ''; + + // ✅ Restore original scroll-margin-top + if (isFirefox) { + this._element.style.scrollMarginTop = originalScrollMarginTop; + } EventHandler.trigger(this._element, EVENT_SHOWN); }; const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);