Results displays an incorrect title in Safari

[alanuecker]

Description

The displayed title of a Results section can be different for the same search result in Safari or Chrome/Firefox. We noticed this issue in our iOS docs for the search term output.

There are situations where the titles are consistent between both browsers but will become inconsistent once you continue to type your search term. I also noticed situations where titles were incorrect until Safari updated the UI and displayed the correct titles afterward.

Chrome:

Safari:

This issue can also be reproduced if you search on other sites like https://docusaurus.io

Chrome:

Safari:

Steps to reproduce

1. Go to https://docusaurus.io
2. Click on Search
3. Enter out in the Input

Expected behavior

The titles should be:

• API
• Markdown Features
• Plugins
• Guides
• Migrating from v1 to v2

Actual behavior

The titles are:

• API
• API
• Plugins
• Blog
• Plugins

Environment

• OS: macOS
• Browser: Safari
• DocSearch version: "@docsearch/react": "3.1.1"

[shortcuts]

Thanks for reporting! That's a funny behavior 🤔

I also noticed situations where titles were incorrect until Safari updated the UI and displayed the correct titles afterward.

Indeed, moving them out of the view and coming back (e.g. scrolling) updates it to its correct value

I can indeed reproduce on a bare minimal reproduction:

• https://z9oxj.csb.app
• search for install

[jollydodo]

Any update on this? I ran into this issue as well and it is really disturbing the search results. Around 20% of our users visit our website through Safari on a desktop, but a staggering 70% visit the website through mobile Safari on IOS and they all get a bad user experience from the search. I'm thinking of removing the lvl0 completely for now which is not ideal.

[levimichael]

@jollydodo can you share a link to where this is happening for you?

[jollydodo]

@jollydodo can you share a link to where this is happening for you?

Off course! if you go to our home page and try searching for 'reserveer' you will see the first lvl0 category as "faq" which is correct. You will then see 'workshops' as the next category (at least in Safari after clearing cache). However the correct category is 'Wiki' which is visible in other browsers such as Chrome. So for example this link is categorised as 'workshop' in safari while it should be categorised as 'wiki' (which it is if you look into the algolia crawler records).

Please let me know if you need more information / more links. :) Incorrect result Safari:

Correct Chrome:

Addition: Reproduction of this issue is reliable, but I can't find a specific category that it's going wrong with. If you for example search for 'over ons' and scroll down, you will see 'workshop 3d scannen' categorised as blog instead of workshop. So it happens for multiple categories. If you look into the developer console, the value is actually correct.

I also noticed that if I now resize my developer console, the hit source value actually get's updated to the correct value (in private mode). incorrect:

resizing while focused (correct):

[levimichael]

@alanuecker if you add attributesToHighlight: ['hierarchy.lvl0'] to your Docsearch searchParameters prop, does it fix the issue?

See the following Stackblitz for more detail on the implementation: https://stackblitz.com/edit/docusaurus-algolia-repro?file=src%2FApp.tsx

[artembelik]

in my case, it helped solve the problem:

.DocSearch-Hit-source {
    position: relative;
}