context-menu drop shadow is not correctly rendered on Linux

[doebi]

Description

The newly added drop shadow for context menus is not correctly working on Linux. I am kinda getting tired of these minor design changes that are poorly executed and have such a high impact on functionality.

Steps to reproduce

1. open the context menu
2. hover over menu items and see how the drop shadow gets re-rendered on top of each other

Actual result

you can see the drop shadown getting "thicker" with each time hovering over a menu item:

Expected result

it looks okay with white background

Reproduces how often

Easily reproduced

Brave version (brave://version info)

Brave 1.67.123 Chromium: 126.0.6478.126 (Official Build) (64-bit) Revision fc7619ef621fe4e6a0fa8b16c718f78ffc97a861 OS Linux JavaScript V8 12.6.228.21 User Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Command Line /opt/brave.com/brave/brave --disable-domain-reliability --enable-dom-distiller --enable-distillability-service --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 --variations-insecure-server-url=https://variations.brave.com/seed --flag-switches-begin --enable-features=PostQuantumKyber --flag-switches-end --component-updater=url-source=https://go-updater.brave.com/extensions --origin-trial-disabled-features=CaptureHandle Executable Path /opt/brave.com/brave/brave Profile Path /home/doebi/.config/BraveSoftware/Brave-Browser/Default Active Variations AllowCertainClientHintsStudy:Enabled BraveAIChatEnabledStudy:Enabled BraveAdblockMobileNotificationsListDefault:Enabled BraveAds.CreativeAdModelBasedPredictorRecencyStudy:NoRecency BraveAdsAdEventStudy:Enabled BraveAdsConversionsStudy:Enabled BraveAdsExclusionRulesStudy:Enabled BraveAdsNewTabPageAdsStudy:Enabled BraveAdsSiteVisitStudy:Enabled BraveAdsTextClassificationPageProbabilitiesStudy:Enabled BraveAggressiveModeRetirementExperiment:Disabled BraveAutoTranslateStudy:AutoTranslateDisabled BraveDebounceStudy:Enabled BraveFeedUpdateStudy:Enabled BraveForgetFirstPartyStorage:Enabled BraveGoogleSignInPermissionStudy:Enabled BraveHorizontalTabsUpdateEnabledStudy:Enabled BraveP3AConstellationEnabled:Enabled BraveP3AJSONOtherDeprecation:Enabled BraveP3ATypicalJSONDeprecationEnabled:Enabled BraveRewardsAllowSelfCustodyProvidersStudy:Enabled BraveRewardsWebUiPanelStudy:Enabled BraveScreenFingerprintingBlockerStudy:Enabled BraveSearchAdStudy:Enabled BraveSearchPromotionBannerStudyOnStable:Default BraveWalletAnkrBalancesEnabled:Default ClampPlatformVersionClientHint:Disabled CookieListDefaultStudy:Enabled Default1pBlockingStudy:Disabled DisableReduceLanguage:Enabled EphemeralStorageStudy:Enabled ExtensionsManifestV2StudyRelease:Default PartitionedCookies:Enabled UserActivityStudy:Triggers WhatsNewStudy:Enabled

Channel information

• [X] release (stable)
• [ ] beta
• [ ] nightly

Reproducibility

• [ ] with Brave Shields disabled
• [ ] with Brave Rewards disabled
• [ ] in the latest version of Chrome

Miscellaneous information

No response

[rebron]

cc: @fallaciousreasoning @zenparsing @aguscruiz

[fallaciousreasoning]

Hey, I just tried to reproduce this in 1.69.115 and wasn't able to. To help with debugging could you provide the following info:

1. What distro/desktop environment are you using?
2. Are you using Wayland or X?
3. Is Brave using software rendering, or your GPU?

It looks like something is going wrong with transparency in the compositor (not sure if in Brave or in your WM). cc @simonhong have you seen this before?

[doebi]

Thanks for looking into this.

Regarding your questions:

1. Ubuntu Jammy + i3wm
2. i3 uses X
3. How do I determine?

Anything else I can you provide you with?

[pemazzon]

Hello there. Just downgraded brave for the same problem. I'm using fluxbox wm but the problem, I think, is the same for any window manager that does not provide a (useless) compositor on its own. As a workaround, using picom (or compton) fixes the issue but a chance to revert to the "shadowless" menu will be greatly appreciated.

[fallaciousreasoning]

Cool that's super helpful @pemazzon - can you confirm it doesn't happen in Chromium?

[pemazzon]

Hello. With chromium the drop down menu is rectangular with no shadows: no problem. In chrome-stable the menu has rounded corners and you can see the corners are not transparent. As a comparison firefox has menus with rounded corners that renders correctly. Anyway the biggest issue is with the dropped-down shadow.

[fallaciousreasoning]

@simonhong I guess this is related to the refactor of the menus that went through a little while back

[pemazzon]

I'd like to add a couple of points here:

1. even without picom the "tabs menu" you get by clicking on the "v" button on the upper right renders perfectly with both rounded corners and a (nice) slight shadow (why don't use this widget?);
2. the problem with the drop down shadows is related to gtk4 and a couple of wannabes developers who think they know best.

[fallaciousreasoning]

Hmmm, I wonder if it's because that tabs menu is a webview, while the context/app menu are native views? Maybe we're treating the webview specially.

Man, that really sucks that this shadows issue is wontfix :disappointed:

Does this mean you're both using X11 with no compositor?

[pemazzon]

Hello. Yes, like many (...more than you probably think :wink:) users I'm not using a compositor to waste CPU cycles...

Anyway: this same problem is also present on gtk-3 applications, like reported here but in that case there is a workaround. You can change the gtk-3 theme by using one that doesn't use "shadowed" widgets: edit ~/.config/gtk-3.0/settings.ini and put something like:

[Settings] gtk-theme-name=Adwaita-dark

I have tried it on a fresh ubuntu 22 VM and you can see the before-and-after comparison on the gnome-control-center.

It looks like you can do something similar with gtk-4 by editing ~/.config/gtk-4.0/gtk.css and putting:

* { border-radius: 0px; box-shadow: 0px; }

but brave-browser doesn't seem to honor any of them. As far as I understand google-chrome (...and so brave?) uses its own "Aura" toolkit?

[A350]

any solution ? i have same problem Debian 12 - Brave 1.68 =(

[cyberpunkrocker-zero]

I'm still stuck with brave-1.66 on Arch Linux because of this horrible idea of FORCED drop shadows. It ruins the whole user experience of otherwise good Brave browser. Please, developers, provide users a way to disable the drop shadows completely!!!

If you insist on forcing stupid 'effects' like this on users, I'm afraid that I'll need to abandon Brave for good!

Remember: Windows 11 uses drop shadows by default, but they can be disabled; gtk4 uses drop shadows, but they can be disabled, too. Why are you forcing un-disableable drop shadows on people?

[doebi]

I'm still stuck with brave-1.66 on Arch Linux because of this horrible idea of FORCED drop shadows. It ruins the whole user experience of otherwise good Brave browser. Please, developers, provide users a way to disable the drop shadows completely!!!

If you insist on forcing stupid 'effects' like this on users, I'm afraid that I'll need to abandon Brave for good!

Remember: Windows 11 uses drop shadows by default, but they can be disabled; gtk4 uses drop shadows, but they can be disabled, too. Why are you forcing un-disableable drop shadows on people?

Feel you!

[pemazzon]

Something must have happened along the way because I have installed brave-nightly today and the problem is not there :smiley: Is it only me (i have recompiled libgtk4 for my ubuntu with the patch provided here ) or the menus have been fixed?

[fallaciousreasoning]

I don't know if we've done anything on our end @pemazzon but glad its working for you! Could you share some steps for other people in the thread?

[pemazzon]

Hi @fallaciousreasoning The only thing I know is that me and other were holding back at version 1.66 because version 1.67 have this issue (just re-downloaded to check and it's there). Today I have tried both brave-nightly (zip file) and brave-stable (apt update) and version 1.69 (stable) or the nightly version don't show the problem. The menus simply don't have rounded corners nor shadows anymore, so I advice everyone to just try to update. It's also true that both the computers I have installed the two versions have my patched gtk4 library but I don't think this is what fixed this... I just rebuilt the library to fix the same problem on other apps.

[fallaciousreasoning]

Another thing I just came across was the brave://flags/#brave-web-view-rounded-corners flag, which you might be able to toggle on/off. Not sure it'll help but might be worth trying.

[doebi]

@pemazzon Yeah, you're right! It seems to be ~fixed~ reverted back to original in 1.69

[fallaciousreasoning]

Okay, thanks for all the input everyone - my theory is that this was something that changed in upstream Chromium. Glad its working for you all again :smile: