History, routeState, and Safari

I’m having an issue with Safari and history. I would post code, but I’m not quite sure which part of my code to post, and I do not think that posting over 4,000 lines of code will help anyone. :sweat_smile:

The problem is this:

  1. Do a search without any refinements/filters (land on instantsearch.js search results page)
  2. Add a query parameter
  3. Choose one of the results (this leads to a new page)
  4. Press “back” in the browser (returns us back to search results)
  5. The results and state do not contain the query, but it can be found in the URL as expected

Refreshing the page fixes the issue. This does not happen every time, but often enough. It seems to only happen with the query parameter. And it only happens in Safari. If I console.log() the routeState, I see that in Chrome/Firefox it is only called once: on the initial page load. But for Safari, it is called three times. And only the first time contains query: <query>.

I realize that this is limited information, especially without any code samples. But I’m hoping that someone here has dealt with a similar issue, or is familiar with the differences of Safari history vs other browsers, or can point me in a direction to investigate this further.

Thanks for reporting. That’s a tough bug to track and I wasn’t able to reproduce in Safari 12.1 with InstantSearch.js 3.4.0.

Can you share which versions you’re using?

I’m using the same versions of both Safari and Instantsearch.js. But, I think I’ve found the problem! Kind of…!

I was using a library called Zenscroll on my page. The times where I would encounter this issue - when the routeState was logged additional times for Safari - the routeState would look something like this: { zenscrollY: 325 }. (I’m not sure why I did not mention this in my initial post, sorry. This was clearly a vital piece of information.)

Removing Zenscroll seems to fix the issue. So for me personally, at least, the issue is resolved.

I am still curious as to why this was happening. Perhaps it is something for you guys to look into…? Zenscroll uses the JavaScript history object and I suspect the issue is somehow related to this. It’s interesting that it was only affecting the query, and not any other refinements. Even though the routeState second/third logs only contained zenscrollY, other refinements would still apply.