Skip to content

Conversation

@joshdayorg
Copy link

Summary

Fixes #17

The Problem

When navigating between rooms, the sidebar scrollbar jumps momentarily in Safari unless it was already at the top position.

Root Cause

The browser's native scroll anchoring feature conflicts with the app's existing scroll position management (via maintain-scroll Stimulus controller) during Turbo navigation.

The Fix

Added overflow-anchor: none using an attribute selector:

[data-controller~="maintain-scroll"] {
  overflow-anchor: none;
}

Why This Approach

  • Self-documenting: Encodes the principle "JS-managed scroll = disable browser anchoring"
  • Automatic coverage: Applies to both sidebar and messages area
  • Future-proof: Any new scroll container with maintain-scroll gets the fix automatically

Browser Support

  • Chrome 56+, Firefox 66+, Edge 79+
  • Safari 18+ (Apple docs)
  • Older browsers: Property safely ignored

Testing

  • Sidebar scroll position stable when changing rooms (Safari)
  • Sidebar scroll position stable when changing rooms (Chrome/Firefox)
  • Messages area scroll behavior unchanged

Disable browser scroll anchoring for elements with custom scroll management.
Uses attribute selector to automatically apply to any element with the
maintain-scroll Stimulus controller.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sidebar scrollbar jumps when changing rooms

1 participant