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

[deepseapenguin]

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
      }
    ]

3. 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;

4. 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

> [email protected] 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

[deepseapenguin]

anything I can do to solve the issue?

[amrbashir]

you could try to replicate data-tauri-drag-region but with touchstart event

 document.addEventListener('touchstart', (e) => {
    if (e.target.hasAttribute('data-tauri-drag-region')) {
      e.preventDefault()
      appWindow.startDragging();
    }
  })

[lucasfernog]

@deepseapenguin can you check if the above solution works? appWindow comes from import { appWindow } from '@tauri-apps/api/window'.

[deepseapenguin]

@lucasfernog @amrbashir hi I tried that code, but I get an error: Property 'hasAttribute' does not exist on type 'EventTarget'.

[amrbashir]

that's weird, could you try executing the above snippet in the dev console?

[deepseapenguin]

@amrbashir I pasted the code in dev console, and when I try to drag it with touch, I got alot of this error

[amrbashir]

I don't know why are u getting this error tbh but we it doesn't matter now, since we confirmed that we need to first add support for this in upstream.

[amrbashir]

/upstream tauri-apps/tao

[sekwah41]

Getting the same issue but its not scrolling like in the video. It just doesn't seem to pay attention to the event but the correct element goes darker with the touchscreen touch.

[zebinfzu]

Encountered the same problem, is there a solution now?

[zebinfzu]

This issue is caused by the elastic oversrcool of webview2, can it be fixed?

[Aviv-Frenkel]

Is there any solution for this issue or not yet?

[zebinfzu]

The problem is still not solved, it is due to the webview2 features caused by ElasticOverscroll, in the edge browser to disable the elastic features(edge://flags/#elastic-overscroll) can be eliminated, but in the windows touch device tauri still exists in the problem

[njfewr]

How is this going now?

[njfewr]

This approch might be a solution:

    let window = builder
        .decorations(false)
        .additional_browser_args("--enable-features=msWebView2EnableDraggableRegions --disable-features=OverscrollHistoryNavigation,msExperimentalScrolling")
        .build()

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

[njfewr]

https://github.com/MicrosoftEdge/WebView2Feedback/issues/2243#issuecomment-1448819425

[maksimetny]

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;
}

[Gofive]

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 #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;
}

do this pass your test?