search

choojs / choo

:steam_locomotive::train: - sturdy 4kb frontend framework
https://choo.io/
MIT License
6.78k stars 595 forks source link

Page freeze in Safari when navigating using trackpad swipe #685

Closed istvanvasil closed 6 years ago

istvanvasil commented 6 years ago

A strange behaviour I have observed in Safari when navigating back to a view using swipe on the trackpad on my Macbook pro. The page freezes for a few seconds before I can interact with it again.

Observed similar behaviour on other choo sites too. Since I don't want to make my project public just yet I illustrate the behaviour with an example:

  1. Navigate to https://jon-kyle.com/.
  2. On the first page scroll down to the middle of the page with all the thumbnails (Select projects, randomized, for..etc.)
  3. Click on any of them then try to navigate back by using the "swipe left and right between pages" function on your trackpad.
  4. Freeze happens for a few seconds before you can do anything.

Here is a video showing the behaviour: choo freeze

My page structure is simple. It's a website for a photographer with a series of right and left floated thumbnails that take you to a project page. It happens with thumbnails lowest on the page only. Not with the ones on the top. Although they are identical in every sense. They take you to the same view and load same type of content.

Did anyone observe this behaviour before?

I hope you don't mind @jondashkyle that I used your site as an example. Maybe you have an idea about this?

Thank you!

istvanvasil commented 6 years ago

Edit:

Setting scroll restoration to manual eliminates this bug. 

if (typeof window !== 'undefined' && window.history.scrollRestoration) {
  window.history.scrollRestoration = 'manual'
}

Then manually handling page restoration.

Wondering if this is a known Safari issue or a Choo bug? @yoshuawuyts @tornqvist

goto-bus-stop commented 6 years ago

FWIW I have heard of this problem before so you're not the only one, but I have no clue what causes it and whether choo is responsible, unfortunately :(

istvanvasil commented 6 years ago

Thanks @goto-bus-stop I managed to solve this for my project with the above described solution. Hope this can be helpful for others who land here.

Taking manual control over scroll restoration creates a 100% accurate popState navigation vs. the sometimes jumpy auto one. So, besides eliminating this issue, that's another upside of it.