Skip to content

Conversation

@joshdayorg
Copy link

@joshdayorg joshdayorg commented Dec 28, 2025

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 that targets any element with the maintain-scroll controller:

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

Why This Approach

Using an attribute selector instead of targeting a specific class:

  • Self-documenting: Encodes the principle "JS-managed scroll = disable browser anchoring"
  • Automatic coverage: Applies to sidebar AND messages area (both use maintain-scroll)
  • Future-proof: Any new scroll container with maintain-scroll gets the fix automatically
  • Maintainable: No need to update CSS when adding new scroll containers

Browser Support

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, making it more maintainable than
targeting specific classes.

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@joshdayorg joshdayorg closed this Dec 28, 2025
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