Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[bug] Window without decorations has buggy window controls. #7388

Closed
autriz opened this issue Jul 10, 2023 · 2 comments · Fixed by #9862
Closed

[bug] Window without decorations has buggy window controls. #7388

autriz opened this issue Jul 10, 2023 · 2 comments · Fixed by #9862
Labels
platform: Windows status: needs triage This issue needs to triage, applied to new issues type: bug

Comments

@autriz
Copy link

autriz commented Jul 10, 2023

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)

e40c6a3c-6c11-4d1c-a90d-7eb492991c55.mp4

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
@autriz autriz added status: needs triage This issue needs to triage, applied to new issues type: bug labels Jul 10, 2023
@github-project-automation github-project-automation bot moved this to 📬Proposal in Roadmap Sep 26, 2023
@elibroftw
Copy link

elibroftw commented Oct 5, 2023 •
edited
Loading

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.

@Borber
Copy link

Borber commented May 2, 2024

This problem still exists, very troubling

amrbashir added a commit that referenced this issue May 23, 2024
@amrbashir
fix(core/wry): implement resizing natively on Windows
7cb8a5f 
closes #7388
closes #9510
closes #9464

ref #9268
ref #9053
ref #8770
ref #8750
ref #4012
@amrbashir amrbashir mentioned this issue May 23, 2024
Merged
amrbashir added a commit that referenced this issue Jun 5, 2024
@amrbashir
fix(core/wry): implement resizing natively on Windows (#9862)
f29b788 
closes #7388
closes #9510
closes #9464

ref #9268
ref #9053
ref #8770
ref #8750
ref #4012
pewsheen pushed a commit to pewsheen/tauri that referenced this issue Jun 13, 2024
@amrbashir @pewsheen
fix(core/wry): implement resizing natively on Windows (tauri-apps#9862)
cdf59d0 
closes tauri-apps#7388
closes tauri-apps#9510
closes tauri-apps#9464

ref tauri-apps#9268
ref tauri-apps#9053
ref tauri-apps#8770
ref tauri-apps#8750
ref tauri-apps#4012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
platform: Windows status: needs triage This issue needs to triage, applied to new issues type: bug
Projects
Roadmap
Status: 📬Proposal
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(core/wry): implement resizing natively on Windows tauri-apps/tauri
4 participants
@elibroftw @Borber @FabianLars @autriz