[UX] Improve scroll position preservation across page refreshes, especially on mobile

[freedeaths]

Description

The current scroll position restoration after page refresh needs optimization, particularly on mobile devices. Users should maintain their reading position when refreshing or navigating back to a document.

Current Issues

• Scroll position is lost on page refresh
• Mobile browsers have inconsistent behavior
• Long documents require users to manually scroll back to their position
• Poor user experience when switching between documents

Mobile-Specific Challenges

• iOS Safari scroll restoration quirks
• Android Chrome behavior differences
• Touch scrolling momentum interference
• Viewport height changes (address bar hiding/showing)
• Orientation changes affecting scroll calculation

Technical Requirements

Scroll Position Tracking

• Implement robust scroll position detection
• Account for dynamic content loading
• Handle different viewport sizes and orientations
• Store position relative to document structure (headings, paragraphs)

Storage Strategy

• Use sessionStorage for temporary position tracking
• Consider localStorage for cross-session persistence
• Implement fallback mechanisms for storage failures
• Clean up old position data

Restoration Logic

• Restore position after DOM is fully rendered
• Handle asynchronous content loading
• Account for images and dynamic content affecting layout
• Smooth scroll vs instant positioning options

Implementation Considerations

Cross-Browser Compatibility

• Test on major mobile browsers:
  • iOS Safari
  • Chrome Mobile
  • Samsung Internet
  • Firefox Mobile
  • Edge Mobile

Performance Optimization

• Debounce scroll position updates
• Avoid excessive DOM queries
• Optimize for low-end mobile devices
• Minimize impact on scroll performance

Edge Cases

• Handle documents that change length between visits
• Manage position when content is updated
• Deal with responsive layout changes
• Handle zoom level changes on mobile

User Experience Goals

• Seamless reading experience across refresh/navigation
• Consistent behavior across all devices
• Fast and reliable position restoration
• Graceful fallback when restoration fails

Testing Strategy

• Manual testing on various mobile devices
• Automated browser testing
• Performance benchmarking
• User experience validation

Success Metrics

• Position accuracy within 50px on desktop
• Position accuracy within 100px on mobile (due to viewport variations)
• Restoration time under 200ms
• 95%+ success rate across supported browsers

Priority

High - Critical for user experience, especially on mobile devices where manual scrolling is more cumbersome.