Scroll Restoration After Micro-Frontend Redirects: Double RAF + MutationObserver

Short summary

Restoring scroll position after an external redirect in micro-frontends is fundamentally a timing problem, not a scroll problem. The solution orchestrates three precise steps: (1) persist focus ID in localStorage to survive cross-tab redirects, (2) detect when the target element enters the DOM using MutationObserver as a microtask—before paint—rather than polling, and (3) trigger scrollIntoView via double requestAnimationFrame to ensure the previous frame's paint completes before forcing reflow. This pattern elegantly handles virtual-list edge cases.

• •Scroll restoration requires three synchronized steps: state persistence via localStorage, DOM presence detection via MutationObserver, and painting completion detection via double requestAnimationFrame
• •MutationObserver fires as a microtask after DOM mutations but before paint, making it more precise than polling or IntersectionObserver for this use case
• •Double requestAnimationFrame ensures the previous frame's Paint is complete, preventing forced reflows and layout thrashing when calling scrollIntoView

Generated with AI, which can make mistakes.