Open
Description
Experiencing a flickering issue when moving a transparent NW.js window on Wayland.
The issue manifests as two alternating ghost images appearing inside the window. (which suggests a double buffering problem?)
screen record
out.mp4
Environment
- NW.js Version: 0.97.0 sdk, installed by AUR after editing pkgver to 0.97.0.
- OS: ArchLinux
- GPU:
AMD ATI Radeon Vega Series / Radeon Vega Mobile Series - Desktop Environment: Gnome (
gnome-shell 1:47.5-1) - Wayland Compositor: Mutter (
mutter 47.6-1)
Steps to Reproduce
create package.json:
{
"name": "floating-canvas",
"main": "index.html",
"window": {
"transparent": true,
"frame": false,
"always_on_top": true,
"resizable": false
}
}and index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Canvas</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: transparent;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const win = nw.Window.get();
const img = new Image();
img.src = "example.png";
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
win.resizeTo(img.width, img.height)
win.setMinimumSize(img.width, img.height)
win.setMaximumSize(img.width, img.height)
};
let dragging = false;
let offsetX, offsetY;
canvas.addEventListener("mousedown", (e) => {
dragging = true;
offsetX = e.clientX;
offsetY = e.clientY;
});
document.addEventListener("mousemove", (e) => {
if (!dragging) return;
let x = e.screenX - offsetX;
let y = e.screenY - offsetY;
win.moveTo(x, y);
});
document.addEventListener("mouseup", () => dragging = false);
</script>
</body>
</html>(then create image with alpha channel as example.png)
run nw-sdk . and try to drag the window.