tailwindui-issues icon indicating copy to clipboard operation
tailwindui-issues copied to clipboard

Published 20 hours ago • verified publisher icon tailwindlabs

Unexpected behaviour on browser back button

Open nezaboravi opened this issue 3 years ago • 3 comments

Browsing https://tailwindui.com/components brings me weird experience, and honestly is anoying. Anytime i click on component to browse, page with component details opens, and when i click browser back button, i get back but at the bottom on https://tailwindui.com/components page. Then i need to scroll up to find where i was before.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on any component
  3. When component page opens, click on browser back button
  4. See you are now back to previous page, but on the bottom of page.

Expected behavior Expecting to be back where i was on the page before i clicked on component

Screenshots

Screenshot 2022-09-30 at 10 06 53 Screenshot 2022-09-30 at 10 07 32 Screenshot 2022-09-30 at 10 07 50

Browser/Device (if applicable)

  • OS: MacOs
  • Browser Firefox
  • Version 105.0.1 (64-bit)

nezaboravi avatar Sep 30 '22 08:09 nezaboravi

Hey! Thank you for your bug report! Much appreciated! 🙏

I tried reproducing it on macOS in the following browsers:

  • Safari 16.0
  • Chrome 105.0.5195.102
  • Firefox 105.0.1

And can't seem to reproduce it in any of those.

Do you have any browser extensions that could mess with the page contents by any chance?

  • Does it work in a private window? (assuming extensions are disabled there)
  • Do you also see it in other browsers?

RobinMalfait avatar Sep 30 '22 09:09 RobinMalfait

I'm pretty sure this is an Inertia.js issue — there is a known problem with the scroll restoration in Firefox (https://github.com/inertiajs/inertia/pull/1099). There is already a fix in Inertia for this as part of a bigger "next" release, which I hope to have published soon: https://github.com/inertiajs/inertia/pull/1099

Once that's out, we'll update Tailwind UI to the latest version of Inertia and this issue should go away.

Sorry for the annoyance @nezaboravi! 😕

reinink avatar Sep 30 '22 11:09 reinink

Using opportunity to tell you huge tanks @reinink . Everyone in Coding Wisely is using Inertia, you never can make me annoyed! Real fun here :D Soon i am releaseing two own projects both on inertia, and two client projects, cant be happier

@RobinMalfait happens same in incognito. I am living with it, so nothing breaking :) More like i wanted to point to tailwind team about it. And Tailwind UI- i cant say enough about it. Thanks!

nezaboravi avatar Oct 01 '22 04:10 nezaboravi

@nezaboravi Hey thanks, that's awesome to hear! 😊

Working on Inertia.js tonight, I think I figured out the issue here. By default when you don't define any scroll regions in your app, Inertia falls back to just the browser's default scroll restoration. This generally works fine — but for some reason in Firefox it doesn't. I think that's because this page, which is very large, is probably rendering too slowly, and Firefox has already tried to do the scroll restoration.

The fix in Inertia to just always manually handle the scroll restoration, which will work better because we can wait until the page has actually rendered.

But for now, I've fixed this by simply defining the <body> as a scroll region to force Inertia to manually handle this.

Let me know if you experience this issue again, and thanks so much for reporting this! 🙏

reinink avatar Nov 04 '22 02:11 reinink