From 486ff2a5643f7a5ac66ccef11a97d6c2a282c9ee Mon Sep 17 00:00:00 2001 From: David Taylor Date: Mon, 6 Jan 2025 10:13:29 +0000 Subject: [PATCH] UX: Do not anchor scroll on topic navigation/map (#30580) topic-navigation and topic-map appear in the DOM before the post stream, and are then rearranged with CSS grid. That means that, if they are entirely within the viewport, and does not have a fixed/sticky position, then they will be chosen as the browser's scroll anchor point. We never want these elements to be used as the anchor, so we can set `overflow-anchor: none`. https://meta.discourse.org/t/344386/16 --- app/assets/stylesheets/common/base/topic.scss | 4 ++++ app/assets/stylesheets/common/components/topic-map.scss | 1 + 2 files changed, 5 insertions(+) diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index 3daa7244031..ad1b1bac136 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -40,6 +40,10 @@ Without this those themes would render topics unreadable. */ } + .topic-navigation { + overflow-anchor: none; + } + // timeline @media screen and (min-width: 925px) { // at 925px viewport width and above the timeline is visible (see topic-navigation.js) diff --git a/app/assets/stylesheets/common/components/topic-map.scss b/app/assets/stylesheets/common/components/topic-map.scss index 7e242a406db..11ed9547889 100644 --- a/app/assets/stylesheets/common/components/topic-map.scss +++ b/app/assets/stylesheets/common/components/topic-map.scss @@ -44,6 +44,7 @@ body:not(.archetype-private_message) { (var(--topic-body-width-padding) * 2) ); padding-block: 0.5em; + overflow-anchor: none; @include breakpoint(mobile-large) { font-size: var(--font-down-1);