Wayland drop shadow flickering #19699

fxha · 2019-08-09T14:15:22Z

Preflight Checklist

I have read the Contributing Guidelines for this project.
I agree to follow the Code of Conduct that this project adheres to.
I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

Electron Version:
- 6.0.1
Operating System:
- Fedora 30, GNOME on Wayland
Last Known Working Electron version:
- 5.0.8

Expected Behavior

No drop shadow flickering and a small shadow when the window is not focused like in Electron v5.

Actual Behavior

A frameless window on (GNOME) Wayland has no "small" shadow if it's not focused and the drop shadow begins to flicker if the window is focused and you move the cursor outside the window over other elements like buttons, lists or other native elements that are behind our frameless window (maximize Firefox and hover over Firefox tabs, native application buttons etc while the frameless window is focused in front of the other window). Another option is to hover over/click on elements inside the frameless window like buttons, links or menus. You can also reproduce this issue if you resize the frameless window.

To Reproduce

$ git clone https://github.com/electron/electron-api-demos.git
$ cd electron-api-demos
$ git apply <path_to_patch_below>
$ npm install

Patch

diff --git a/index.html b/index.html
index b5b8b8a..7685be5 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
 <body>
 
   <nav class="nav js-nav">
-    <header class="nav-header">
+    <header class="nav-header" style="-webkit-app-region: drag;">
       <h1 class="nav-title">Electron <strong>API Demos</strong></h1>
       <svg class="nav-header-icon"><use xlink:href="assets/img/icons.svg#icon-electron"></use></svg>
     </header>
diff --git a/main.js b/main.js
index 16fa2e2..a6e07fa 100644
--- a/main.js
+++ b/main.js
@@ -25,7 +25,12 @@ function initialize () {
       title: app.getName(),
       webPreferences: {
         nodeIntegration: true
-      }
+      },
+
+      useContentSize: true,
+      frame: false,
+      titleBarStyle: 'hiddenInset',
+      zoomFactor: 1.0
     }
 
     if (process.platform === 'linux') {
diff --git a/package-lock.json b/package-lock.json
index 4931cfc..7126389 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,9 +55,9 @@
       }
     },
     "@types/node": {
-      "version": "10.14.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.6.tgz",
-      "integrity": "sha512-Fvm24+u85lGmV4hT5G++aht2C5I4Z4dYlWZIh62FAfFO/TfzXtPpoLI6I7AuBWkIFqZCnhFOoTT7RjjaIL5Fjg=="
+      "version": "10.14.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.15.tgz",
+      "integrity": "sha512-CBR5avlLcu0YCILJiDIXeU2pTw7UK/NIxfC63m7d7CVamho1qDEzXKkOtEauQRPMy6MI8mLozth+JJkas7HY6g=="
     },
     "abbrev": {
       "version": "1.1.1",
@@ -1179,9 +1179,9 @@
       "dev": true
     },
     "electron": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-5.0.1.tgz",
-      "integrity": "sha512-8KksyhAPcpXVeO8ViVGxfZAuf8yEVBCtV0h/lMBD8VFbCQ9icej1K5csCFAGirbZbqOz5IdsBZX9Gpb9n4RCag==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-6.0.1.tgz",
+      "integrity": "sha512-XY69rI5IThIxsOS2BD+1ZkHE9hqkm4xN5a3WQFSmFRr2by4q5CnIe9vXmptlouGPTLs3tb7ySX/+K9CvH3szvg==",
       "requires": {
         "@types/node": "^10.12.18",
         "electron-download": "^4.1.0",
diff --git a/package.json b/package.json
index 64b2a22..07e1d94 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "standard": "^8.2.0"
   },
   "dependencies": {
-    "electron": "^5.0.1",
+    "electron": "^6.0.1",
     "electron-log": "^2.2.14",
     "electron-settings": "^3.0.7",
     "electron-shortcut-normalizer": "^1.0.0",

Start electron-api-demos via npm run start and skip first Get Started Page
Now you see a page with menus on the left side and documentation on the right. Unmaximize the window and move the window around in front of another window by clicking on the "Electron API Demos" container.
The drop shadow begins to flicker when you move the cursor outside the focused window over other window elements (like Firefox tabs/Dash to Dock application logos etc) that are behind the frameless window or hover/click on the different menus on the left side while the window is focused and has a drop shadow. To focus the window click on the "Electron API Demos" container and move the window a bit.

Additional Information

This only occurs on Linux with Wayland but not X11. When using app.disableHardwareAcceleration() this issue doesn't occur.

The text was updated successfully, but these errors were encountered:

fxha · 2019-09-26T15:22:02Z

@sofianguy I don't really whether this is related to the issue above but after I take a screenshot using GNOME Screenshot on Wayland from a frameless window Electron/Chromium go crazy:

There are currently only two options: --disable-gpu or use a native window.

fxha · 2019-11-02T15:10:55Z

Still an issue with Electron 7.0.1 and if I don't disable GPU on Wayland an error is shown that can be reproduced with Electron binaries and the setup above.

[1958:1102/160608.713671:ERROR:buffer_manager.cc(488)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL command

dragonation · 2020-02-11T13:33:02Z

I think the bug is caused by chromium code implementation. The bug exists in Chromium, Electron and NWJS. Any NWJS window flickering while resizing under GNOME on Wayland. And if we open any non-main window in Chromium (such as task manager, or dev-tools), and resizing it, the shadow flickering, too.

I have reported the bug on chromium.

https://bugs.chromium.org/p/chromium/issues/detail?id=1048968

dragonation · 2020-03-10T02:04:42Z

The same bug on Chromium is disappeared after upgrade GNOME to 3.36.0. and Electron is also OK after upgrades

electron-triage · 2021-03-09T00:59:16Z

The Electron version reported on this issue is no longer supported. See our supported versions documentation.

If this is still reproducible on a supported version, please open a new issue with any other new information that a maintainer should know.

Thank you for taking the time to report this issue and helping to make Electron better! Your help is appreciated.

sofianguy added 6-0-x bug 🪲 platform/linux labels Aug 15, 2019

sofianguy added this to Unsorted Issues in 6.1.x Aug 15, 2019

fxha mentioned this issue Sep 12, 2019

Electron 6 upgrade plan marktext/marktext#1255

Closed

fxha mentioned this issue Sep 12, 2019

Update: update dialog API to Electron 6.0 marktext/marktext#1317

Merged

fxha mentioned this issue Sep 23, 2019

Drop shadow flickering on Linux with Wayland marktext/marktext#1359

Open

tierninho mentioned this issue Dec 19, 2019

Menubar flickering - Electron bug desktop/desktop#8821

Closed

sofianguy added the 6-1-x label Feb 19, 2020

electron-triage closed this Mar 9, 2021

electron / electron Public

Wayland drop shadow flickering #19699

Wayland drop shadow flickering #19699

fxha commented Aug 9, 2019 •

edited

fxha commented Sep 26, 2019

fxha commented Nov 2, 2019 •

edited

dragonation commented Feb 11, 2020

dragonation commented Mar 10, 2020 •

edited

electron-triage commented Mar 9, 2021

electron / electron Public

Wayland drop shadow flickering #19699

Wayland drop shadow flickering #19699

Comments

fxha commented Aug 9, 2019 • edited

Preflight Checklist

Issue Details

Expected Behavior

Actual Behavior

To Reproduce

Additional Information

fxha commented Sep 26, 2019

fxha commented Nov 2, 2019 • edited

dragonation commented Feb 11, 2020

dragonation commented Mar 10, 2020 • edited

electron-triage commented Mar 9, 2021

fxha commented Aug 9, 2019 •

edited

fxha commented Nov 2, 2019 •

edited

dragonation commented Mar 10, 2020 •

edited