Navbar dropdown flickers when hovering over corner

Kimi-Gao commented 2 years ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[ ] I have tried the npm run clear or yarn clear command.
[ ] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[ ] I have tried creating a repro with https://new.docusaurus.io.
[ ] I have read the console error message carefully (if applicable).

Description

Navbar dropdown sometimes flickers when switching

https://user-images.githubusercontent.com/12554487/160448887-3fa6240a-ba1b-4d05-b184-2b50c0ba0181.mov

Reproducible demo

https://docusaurus.io/

Steps to reproduce

hover one navbar item with dropdown
move slowly to the other navbar item with dropdown

Expected behavior

No flickering

Actual behavior

flickering as demo shows

Your environment

Public source code:
Public site URL:
Docusaurus version used:
Environment name and version (e.g. Chrome 89, Node.js 16.4):
Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

[ ] I'd be willing to fix this bug myself.

Josh-Cena commented 2 years ago

Could you give your browser version? I can't reproduce this on my end. You sent https://github.com/facebook/docusaurus/issues/4854 which I can't reproduce either—my guess is that this is either browser, device, or OS.

Kimi-Gao commented 2 years ago

@Josh-Cena FYI

Chrome version: Version 99.0.4844.83 (Official Build) (x86_64)
macOS 11.6.4 and 12.0.1 both have this issue

But I don't think it's caused by browser version or device, it often happens when move across the edge of two navbar items. Please move slowly and carefully like following mouse path shows, you may see the same issue:

For #4854 , I haven't had this issue recently, if it does, I'll update it below this. Thanks!

Josh-Cena commented 2 years ago

Thanks, I can reproduce this now. @lex111 Guess you like little UI quirks, do you want to take a look at this? Probably changing where hover selector is applied would help.

lex111 commented 2 years ago

I guess there is another solution (https://github.com/facebookincubator/infima/pull/230), so please look at the preview site https://deploy-preview-230--infima.netlify.app/demo/

facebook / docusaurus