hotwired / turbo

The speed of a single-page web application without having to write any JavaScript
https://turbo.hotwired.dev
MIT License
6.65k stars 421 forks source link

Turbo scrolls to Top of current page before rendering new visited page (related to data-turbo-track="reload") #387

Closed chipairon closed 2 years ago

chipairon commented 3 years ago

I have a demo of the issue here https://prairie-swamp-observatory.glitch.me/index.html second_page.html has a script with data-turbo-track="reload" that the first page does NOT have.

When clicking the link at the bottom of the page (from either page): 1- The scroll is moved to the top of the current page. 2- Then the new page is rendered.

My expectation would be that the current page is not scrolled to top before the next page is rendered.

If the turbo-track:reload attribute is removed from the script tag, the scroll does not happen:

<script src="/second_page_script.js" defer data-turbo-track="reload"></script>

The source code of the demo is here: https://glitch.com/edit/#!/remix/prairie-swamp-observatory

The demo loads Turbo from skypack (currently @hotwired/turbo@7.0.0-rc.3).

PS: it might be related to the behaviour described in https://github.com/hotwired/turbo/issues/114 but I'm not sure.

srt32 commented 2 years ago

Thanks for reporting this! We've bumped into a similar issue. I've been debugging for a bit but no success yet. I can report that I can repro the issue by running the server and going to http://localhost:9000/src/tests/fixtures/rendering.html.

Then, scroll down (you may need to shrink the height of your window), and click on "Visit control: reload". The URL will update, the page scroll up, and then navigate.

srt32 commented 2 years ago

I've determined the problem is in https://github.com/hotwired/turbo/blob/da35d5b440e226300927b90d12c02e0cade30931/src/core/drive/visit.ts#L411 and in the "reload" case we shouldn't scroll but I'm not sure how to properly gate this action without breaking other behavior like properly scrolling back to anchors on the same page.

srt32 commented 2 years ago

@chipairon does https://github.com/hotwired/turbo/pull/571 resolve your issue?