CSS :hover event makes the browser unusable

[sighclone]

Description

When I hover my mouse over an element, say, a YouTube thumbnail, I get the usual video preview, the time is hidden and the 'watch later' and 'add to queue' options appear over the video. However, when I remove the mouse from the thumbnail, the video preview continues and it appears like the browser doesn't recognize that I have removed my mouse from the spot. In some cases, this is very annoying where the entire screen is covered by elements that are supposed to be displayed only on mouse hover. These elements that open up actually can be closed again by re-hovering over them and leaving the element area once again.

Steps to Reproduce

This happened completely randomly after about two months since I've first started using Brave. If you need some specific info (logs or something) do ask.

Actual result:

Expected result:

The 'watch later' and 'add to queue' along with the video preview are expected to stop once my mouse is not hovering over them.

Reproduces how often:

Always. No exception.

Brave version (brave://version info)

Brave	1.25.72 Chromium: 91.0.4472.101 (Official Build) (64-bit)
Revision	af52a90bf87030dd1523486a1cd3ae25c5d76c9b-refs/branch-heads/4472@{#1462}
OS	Windows 10 OS Version 2009 (Build 19042.1052)
JavaScript	V8 9.1.269.36
User Agent	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36
Command Line	"C:\Program Files\BraveSoftware\Brave-Browser\Application\brave.exe" --enable-dom-distiller --disable-domain-reliability --no-pings --origin-trial-public-key=bYUKPJoPnCxeNvu72j4EmPuK7tr1PAC7SHh8ld9Mw3E=,fMS4mpO6buLQ/QMd+zJmxzty/VQ6B1EUZqoCU04zoRU= --sync-url=https://sync-v2.brave.com/v2 --lso-url=https://no-thanks.invalid --variations-server-url=https://variations.brave.com/seed --enable-features=LegacyTLSEnforced,PrefetchPrivacyChanges,PasswordImport,ReducedReferrerGranularity,WebUIDarkMode,AutoupgradeMixedContent,SafetyTip,WinrtGeolocationImplementation --disable-features=HandwritingRecognitionWebPlatformApiFinch,FlocIdComputedEventLogging,FledgeInterestGroups,InterestCohortFeaturePolicy,HandwritingRecognitionWebPlatformApi,IdleDetection,TrustTokens,DirectSockets,SharingQRCodeGenerator,NotificationTriggers,WebOTP,EnableProfilePickerOnStartup,TextFragmentAnchor,AutofillEnableAccountWalletStorage,FledgeInterestGroupAPI,SignedExchangeSubresourcePrefetch,InterestCohortAPIOriginTrial,FirstPartySets,AutofillServerCommunication,LiveCaption,FederatedLearningOfCohorts,SignedExchangePrefetchCacheForNavigations,NetworkTimeServiceQuerying,SubresourceWebBundles,LangClientHintHeader,TabHoverCards --flag-switches-begin --flag-switches-end

Version/Channel Information:

• Can you reproduce this issue with the current release?
• yes
• Can you reproduce this issue with the beta channel?
• yes
• Can you reproduce this issue with the nightly channel?
• haven't tried

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields?
• no
• Does the issue resolve itself when disabling Brave Rewards?
• no
• Is the issue reproducible on the latest version of Chrome?
• yes. I tried this through Linux (dual boot) with the latest version of Chromium and the same happened, after about 3 weeks the same issue as seen here in Brave happened there too, it's just random.

Miscellaneous Information:

System Info:

Windows 10 - Brave, Pop_OS 20.10 - Chromium, 9th gen Intel i7-9750H, Intel UHD 630, NVIDIA GTX1650 Mobile.

[rebron]

cc: @ryanbr While you're looking at YouTube can you see if you can reproduce this issue with performance on hover?

[ryanbr]

I'll do some testing, comparing our perf with Chrome

[sighclone]

cc: @ryanbr While you're looking at YouTube can you see if you can reproduce this issue with performance on hover?

Yes, the issue remains even on YouTube. (refer to image provided above for the issue shown on YouTube)
However, it is not limited to YouTube. It occurs on all websites, always.

[ryanbr]

Like what other sites @sighclone ? How is the performance measured?

[sighclone]

The following is the flow of events that happen:

1. Mouse hover starts on an element
2. Element responds to hover
3. Mouse is taken away from element
4. Element remains in hover state, doesn't reset.

To name a few sites:

1. YouTube.com
2. github.com

Sites on which this doesn't happen:

1. Gmail (mail category tabs hover)
2. http://sighclone.github.io/ (my own website in which I specifically used CSS :hover)

[sighclone]

I also apologize for not mentioning these site on which the problem doesn't occur.

[ryanbr]

Did test the hover option on youtube, Showing overlays (Add to queue and Watch later)
Tested in clean Brave Beta profile. Can you test in a clean Brave profile @sighclone

https://youtu.be/DWsGnycmBfo

[sighclone]

Hello!
This problem starts happening after a while (randomly). I was able to use Brave normally until one fine day it randomly started happening. Then I had to switch to chrome, which also developed this issue within a few days.
Microsoft Edge also showed this issue on Linux but not on Windows.
The browser that didn't replicate this issue is Firefox, on both Windows and Linux.
And yes, I did try it again in a clean new Brave profile and the issue did not reoccur. But, as I mentioned, it starts happening after a while, a few days.
[PS: I'd assume it has something to do with the chromium framework since all the browsers that show this issue are chromium based.]

[rebron]

@sighclone Are you still seeing this issue?

[sighclone]

I had reinstalled windows (which reset all data incl. wallet). After about 6 months, I've reinstalled it, now I face no issue.