preserveScroll: true with preserveState: 'errors' causes visible scroll position jump during page update #2644
Description
@inertiajs/vue3 Version
2.2.8
Backend stack (optional)
- inertia: 2.0,
- laravel: 12.21,
- php: 8.4
Describe the problem
When submitting a form with both preserveScroll: true and preserveState: 'errors', the scroll position is briefly lost and then recovered, causing a noticeable visual "jump" or shift. This creates a poor user experience as the page appears to scroll to the top momentarily before jumping back to the original position.
Steps to reproduce
const submitForm = () =>
form.post(route('planner.my.account.update'), {
preserveScroll: true,
preserveState: 'errors',
});
The scrollable element is a custom container:
<section id="content" class="content-with-sidebar-content">
<!-- form content -->
</section>
Expected Behavior:
The scroll position should remain stable throughout the entire form submission and response cycle, with no visible movement or jumping.
Actual Behavior:
When both preserveScroll: true and preserveState: 'errors' are used together, the scroll position is temporarily lost (page scrolls to top) and then immediately restored, causing a visible "jump" or flicker effect.
Additional Notes:
- Using only preserveScroll: true (without preserveState) prevents the jumping, but the updated data from the server is not reflected in the page
- The scroll position is ultimately restored correctly, but the intermediate state where it's lost creates a jarring visual experience
- This occurs with a custom scrollable container (not the document body)
Is there a way to prevent this scroll position jump while still preserving state and updating data from the server response?