weird overlay in notebook list when hover one

[individual-it]

Environment

Joplin version: Joplin 2.9.17 (prod, linux) Revision: a84a8e7 Platform: Desktop OS specifics: Linux, Ubuntu 22.04, Gnome

Steps to reproduce

1. in a list of notebooks hover over one

some strange text-overlay is shown in the lower notebooks

Describe what you expected to happen

The other notebook in the list should not change the look

[laurent22]

do you use any theme or plugin?

[individual-it]

I never changed anything consciously

[laurent22]

It sounds like a display bug. Does it still happen if you reboot your computer? Did you change a graphic driver recently?

[salvage1]

I am experiencing this issue as well after updating to Joplin 2.9.17. Same Environment: Desktop, Ubuntu 22.04. No other changes to the system. Not fixed by reboot.

[rodolf0]

Same happening here. Even without hover, just starting the app from scratch, after reboot.

Env: Linux Fedora 36, Gnome 42.4 (Wayland), Intel Xe Graphics.

Upgraded from Joplin stable v2.8.8 -> v2.9.17 and this started happening.

[laurent22]

What's that extra overlay exactly? Is that some text being overlayed or just random pixels?

[rodolf0]

It feels like random pixels. Note that it affects not just the text but also the notebook icon

[salvage1]

I noticed this morning that some of the messed up looking text was blinking in sync with the cursor in the Joplin note I was working on. Not sure if that is helpful.

[kpspu]

The same bug.

Joplin 2.9.17 (prod, linux) - appimage Sync Version: 3 Profile Version: 41 Keychain Supported: No Revision: a84a8e7

Operating System: EndeavourOS KDE Plasma Version: 5.26.4 KDE Frameworks Version: 5.101.0 Qt Version: 5.15.7 Kernel Version: 6.1.1-arch1-1 (64-bit) Graphics Platform: X11 Processors: 8 × 11th Gen Intel® Core™ i7-1165G7 @ 2.80GHz

The same on the XFCE desktop. Actually this bug appeared after new XFCE 4.18 and was the reason I switched to KDE. But KDE shows the same. It affects only Toggle sidebar.

[Fbrisset]

I have the same Bug on Joplin 2.9.17. OS : Debian Buster (11), Desktop environment : gnome 3.38 Graphics Platform: Wayland Kernel version : 5.10.0-20-amd64 Processor : 11th Gen Intel i5-1135G7 Graphic card : Iris Xe graphics (Intel Tiger Lake GT2) Mesa : 20.3.5 Joplin : 2.9.17 (on Flathub) no plugins.

I think the problem must be with the Intel platforms like graphics card. In particular I had some bug with mesa as driver.

[laurent22]

Is there an upstream bug about this somewhere? Maybe on Electron repository or Linux graphic driver? If it helps we can upgrade Electron but it would be good to know to which version

[Fbrisset]

I know there is a bug on the Mesa driver for intel 11th gen processors with intel Xe graphics card. But it has been resolved in the new versions (I use Mesa 20.3.5), I will have to ask others if they have the bug on the new version of mesa or if there are AMD processors that have the bug

Here for merge request who fix the bug : https://gitlab.freedesktop.org/mesa/mesa/-/merge_requests/9903

[x12Mike]

Noticed this today myself. I'm (was) using the AppImage for v2.9.17 I also noticed the same behavior with v2.10.4, but not with v2.8.8 which is what I went back to.

OS: Linux Mint 21.1 x86_64 Kernel: 5.15.0-57-generic DE: Cinnamon 5.6.5 WM: Mutter (Muffin) CPU: 12th Gen Intel i9-12900HK (20) @ 5.000GHz GPU: Intel Alder Lake-P GPU: NVIDIA GeForce RTX 3050 Ti Mobile Memory: 8806MiB / 31775MiB

I have no additional plugins installed either.

[inesucrvenom]

I was on older Fedora up until two days ago and with older Joplin. Today I'm on latest Linux Mint with cinnamon, and latest Joplin and I've faced the same issue as others are describing.

You can get the proper name when on mouse hover, sometimes even when just scrolling with scrollbar.

However, I don't see broken icons, only notebook titles unlike in some other reports. And I think it's repeating some other note title, not just random pixels, but I couldn't decipher which ones.

I did fresh install, with no plugins and no userchrome.css, I did both sh and flatpak installations several times, I thought my backup of joplin was broken, so I even gave it download everything from sync. I lost count of reinstalls I've done :rofl:

Also, same behaviour is with default instalation, but also after nvidia drivers were installed. Also various resolution / zoom levels tried.

After installing plugins and setting userchrome to my liking, the issue is still here, if this info helps anyhow.

Edit: I've now on Joplin 2.8.8, and can confirm that I don't have those issues.

[laurent22]

Anyone reported this on the Electron repository? I don't think it's something we can fix this looks like bad interaction between Electron and the graphic driver

[kpspu]

Anyone reported this on the Electron repository? I don't think it's something we can fix this looks like bad interaction between Electron and the graphic driver

You think? But how to explain it to the Electron team? I have many Electron apps, but only Joplin behaves in this way.

More strange is that:

• Main titles NOTEBOOKS and TAGS is OK
• Syncing button is OK
• List of notes is OK
• Notes itself is OK

Only the Notebooks names and Tags names overlaying each other. Like fragments from the line X goes to the line X+1 and from X+1 to X+2 and further...

What is so special about layer with Notebooks and Tags?

[laurent22]

We're only displaying valid HTML, that works fine on macOS and Windows and there's nothing in our code that can say "please randomly break the text on Linux" which is why I assume it's something to do with the display driver.

Perhaps we are hitting some edge case that breaks the Linux driver, and other apps don't do that. If we can tweak that HTML to prevent this I don't mind and would accept a PR, but personally I can't replicate it because I'm not on Linux

[kpspu]

but personally I can't replicate it because I'm not on Linux

Ok, it's sad. My knowledge isn't enough to report this bug in a right manner to the Electron team :(

[laurent22]

That's great, thanks for sharing the fix @libremaster! We'll add this to the main app when running in Linux

[linuzzz]

I did a test with pre-release 2.10.11 in fedora 37 with gnome and the bug is present in the list of tags but not in the list of notebooks

[laurent22]

Please open a new issue with screenshot

[cas--]

I have just finished creating a workaround for the same issue in Logseq #7233. The conclusion is an Electron (Chromium) Linux Intel GPU rendering problem that really should be reported upstream.

Although setting the opacity does workaround the issue it is at the slight expense of a brighter UI for Linux users. After some further digging I found that the fractional opacity setting is creating a stacking context for the icon and text elements resulting in a rendering bug. This can be worked around by forcing a separate stacking context for the text elements.

I have submitted a PR but here is the change for using in userchrome.css:

.list-item .title, .list-item .tag-label{
    position: relative;
}

[laurent22]

The conclusion is an Electron (Chromium) Linux Intel GPU rendering problem that really should be reported upstream.

Maybe that's where we should focus our efforts? I'm not so keen on adding further workaround and would rather wait from an upstream fix

[cas--]

I agree and understand reticence about adding more workarounds but in this case I am simplifying and narrowing down the workaround to restore the correct sidebar opacity for Linux users.

I looked at creating an upstream bug at Electron but 19 & 20 are unsupported so reporting will likely be rejected. I also expect we will need to create a sample Electron app with the simplest example recreating the issue on 19 or 20, test in latest versions then report it. I made a tiny start on it but have other tasks to get back to...

[laurent22]

Maybe it will fix itself when we upgrade Electron, so I'd wait at least for this

[cas--]

I finally managed to small-scale replicate and created an upstream bug report. Seems it's been broken since v18 and still not fixed in v24

[zgs225]

.folders a.list-item { opacity: 1; }

The selector should be .sidebar .list-item-container > .list-item, it will fix all overlap problems, including items in folder, tags, etc.

[cas--]

@zgs225 Have you tried my changes since they will not change the opacity of the sidebar items?

.list-item .title, .list-item .tag-label{
    position: relative;
}