tauri
tauri copied to clipboard
tauri-apps
[bug] Window without decorations has buggy window controls.
Describe the bug
When disabling window decorations, controls are getting bugged, i.e. when resizing window from custom top bar it may just start dragging it or work as intended, or when hovering edges of window, cursor switching between default and resize
Reproduction
npm create tauri-app@latest, js vanilla frontend
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<script type="module" src="/main.js" defer></script>
</head>
<body>
<div style="height: inherit; width: inherit; display: flex; flex-direction: column;">
<div style="width: 100%; height: 4rem; background-color: gray;" data-tauri-drag-region></div>
<div class="custom-scroll scroll">
<h1>Tauri</h1>
<div style="height: 1000px;"></div>
</div>
</div>
</body>
</html>
styles.css
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif;
margin: auto;
width: 100vw;
height: 100vh;
}
.custom-scroll {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
.scroll::-webkit-scrollbar {
height: 6px;
width: 12px;
}
.scroll::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .0);
border-radius: 3px;
}
.scroll::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 3px;
}
.scroll:hover::-webkit-scrollbar-thumb {
background-color: rgba(11, 11, 13, .2);
}
In tauri config: enable startDragging, disable decorations
Expected behavior
Expected behavior like in electron app (see video)
https://github.com/tauri-apps/tauri/assets/54988116/5440c07e-1e6a-484e-9524-76c98ffbfb18
Platform and versions
[✔] Environment
- OS: Windows 10.0.19044 X64
✔ WebView2: 114.0.1823.67
✔ MSVC:
- Visual Studio Build Tools�2019
- Visual Studio Community�2019
✔ rustc: 1.70.0 (90c541806 2023-05-31)
✔ Cargo: 1.70.0 (ec8a8a0ca 2023-04-25)
✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
✔ Rust toolchain: stable-x86_64-pc-windows-gnu (default)
- node: 18.12.1
- pnpm: 8.1.1
- yarn: 3.4.1
- npm: 9.6.0
[-] Packages
- tauri [RUST]: 1.4.1
- tauri-build [RUST]: 1.4.0
- wry [RUST]: 0.24.3
- tao [RUST]: 0.16.2
- @tauri-apps/api [NPM]: not installed!
- @tauri-apps/cli [NPM]: 1.4.0
[-] App
- build-type: bundle
- CSP: unset
- distDir: ../src
- devPath: ../src
Stack trace
No response
Additional context
No response
Another reproducible example/project https://github.com/elibroftw/modern-desktop-app-template (Titlebar.jsx)
The resize cursor appears at the top but when you try to resize from the top of the titlebar, you end up moving the window instead. Update: it works only if your cursor is at the topmost, but if it is not at the topmost and it has the resize cursor, it won't work.
