tauri: [bug] drag-region doesn't work correctly on windows touchscreen device
Describe the bug
I can drag with mouse, but not touchscreen
Reproduction
- npx create-tauri-app, choose react, and typescript
- in tauri.conf.json, change the tauri.windows:
"windows": [
{
"decorations": false,
"fullscreen": false,
"height": 300,
"resizable": true,
"title": "",
"width": 200,
"alwaysOnTop": true
}
]
- App.tsx:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<div data-tauri-drag-region style={{
backgroundColor: "#111",
padding: 20
}}>
Floating Hotkey
</div>
</header>
</div>
);
}
export default App;
- App.css
.App {
text-align: center;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: start;
font-size: calc(10px + 2vmin);
color: white;
}
should get something like this:
Expected behavior
touchscreen should behave same as mouse drag
Platform and versions
npm run tauri info
> floating-hotkey@0.1.0 tauri
> tauri "info"
Environment
› OS: Windows 10.0.22000 X64
› Webview2: 103.0.1264.62
› MSVC:
- Visual Studio Community 2019
› Node.js: 16.6.0
› npm: 7.19.1
› pnpm: Not installed!
› yarn: 1.22.17
› rustup: 1.24.3
› rustc: 1.61.0
› cargo: 1.61.0
› Rust toolchain: stable-x86_64-pc-windows-msvc
Packages
› @tauri-apps/cli [NPM]: 1.0.5
› @tauri-apps/api [NPM]: 1.0.2
› tauri [RUST]: 1.0.5,
› tauri-build [RUST]: 1.0.4,
› tao [RUST]: 0.12.2,
› wry [RUST]: 0.19.0,
App
› build-type: bundle
› CSP: unset
› distDir: ../build
› devPath: http://localhost:3000/
› framework: React
App directory structure
├─ .git
├─ node_modules
├─ public
├─ src
└─ src-tauri
Stack trace
Compiling...
Compiled with warnings.
Warning
(11:3) autoprefixer: start value has mixed support, consider using flex-start instead
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
WARNING in ./src/App.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(11:3) autoprefixer: start value has mixed support, consider using flex-start instead
webpack compiled with 1 warning
No issues found.
Additional context
No response
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 1
- Comments: 18 (5 by maintainers)
This solution allows to enable drag region feature to support touch screens (inherits @njfewr solution) and exclude some items from drag region (follows roadmap proposal https://github.com/tauri-apps/tauri/pull/6362), and it disables elastic overscroll:
--enable-features=msWebView2EnableDraggableRegions --disable-features=ElasticOverscrolltotauri.conf.json>.tauri.windows.additionalBrowserArgs