tauri: [bug] drag-region doesn't work correctly on windows touchscreen device

Describe the bug

I can drag with mouse, but not touchscreen

Reproduction

  1. npx create-tauri-app, choose react, and typescript
  2. in tauri.conf.json, change the tauri.windows:
"windows": [
      {
        "decorations": false,
        "fullscreen": false,
        "height": 300,
        "resizable": true,
        "title": "",
        "width": 200,
        "alwaysOnTop": true
      }
    ]
  1. 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;
  1. 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:

https://user-images.githubusercontent.com/36293056/180617696-e115d8dd-e7b6-493a-91e8-4cf81da61ac6.mp4

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)

Most upvoted comments

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=ElasticOverscroll to tauri.conf.json > .tauri.windows.additionalBrowserArgs

[data-tauri-drag-region] {
	-webkit-app-region: drag;
}

[data-tauri-drag-region-exclude] {
	-webkit-app-region: no-drag;
}