Resizing glitch on custom titlebar click

[lumenian]

Describe the bug

On Windows clicking on an edge of a custom titlebar (data-tauri-drag-region region), when the resize cursor appears, triggers a resize animation and double clicking triggers a weird change of the window's position and size. After that the app gets unresponsive.

To Reproduce

1. On Windows launch a Tauri app with "decorations": false and a custom titlebar made with data-tauri-drag-region attribute.
2. Click once on the titlebar's outer edge - expect resize animation.
3. Double click in the same manner - expect weird window's position and size change.
4. After step 3 you can try blurring the window and focusing it again - expect to see a weird split of the window into two separate parts.
5. Minimizing and then maximizing through a task bar seems to restore the app's responsiveness.

Screenshots

Steps 2 and 3 demonstration:

Platform and Versions:

Operating System - Windows, version 10.0.19043 X64
Webview2 - 92.0.902.84

Node.js environment
  Node.js - 14.15.0
  @tauri-apps/cli - 1.0.0-beta.10
  @tauri-apps/api - 1.0.0-beta.8

Global packages
  npm - 6.14.8
  yarn - 1.22.11

Rust environment
  rustc - 1.54.0
  cargo - 1.54.0

App directory structure
/.git
/.vscode
/dist
/node_modules
/src
/src-tauri

App
  tauri.rs - 1.0.0-beta.7
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../dist
  devPath - http://localhost:3000

Additional context

I couldn't reproduce the issue on Wry custom_titlebar example. A couple of people in Discord managed to reproduce the issue on Tauri.

[fnky]

Just wanted to chime in with a similar bug on macOS with similar configuration (decoration: false + data-tauri-drag-region attribute).

1. The frameless window seems to extend beyond the viewport as seen in the video, by clicking outside the frame will focus the window.
2. Minimizing and maximizing the window shows the native window frame for a split second.

https://user-images.githubusercontent.com/995050/134789139-526faa1a-e13a-425a-8bbf-3def01abab27.mov

Note that the controls seen in the video are not native controls.

[BenJeau]

Want to also pitch in a resizing mouse cursor glitch using decoration: false + data-tauri-drag-region attribute. I'm running Ubuntu 21.04 (using GTK as my desktop env) and it seems that the mouse icon does not properly change to the right one when hovering the sides - not entirely sure if this is a bug, but wanted to pitch in the anomaly that I saw.

[amrbashir]

@BenJeau for hovering it is fixed in the next release but once the drag starts, it will revert back.

[amrbashir]

I can't reproduce this anymore, please upgrade to latest tauri and reopen if you still encounter the bug.

[aaronleopold]

I still have this issue on 1.0.0-rc.6, can provide video if needed but pretty much exactly as the others above.

[marc2332]

It still happens on v1.1.1 (compiling on release or debug doesn't make a difference)

https://user-images.githubusercontent.com/38158676/190849837-70c38313-b2c7-4422-a5e8-0f0c79e0739b.mp4

[rikzun]

I have a similar problem

https://github.com/tauri-apps/tauri/assets/60903586/10aea875-6b46-4d06-a442-65ed91a8a521

[Tmktahu]

I have a similar problem

I also am experiencing the same behavior. No clue how to approach fixing it. At the moment I'm hoping to somehow find a way to add some kind of resize-handle to a corner of the window.

[rikzun]

@Tmktahu I managed to fix it a lil

https://github.com/tauri-apps/tauri/assets/60903586/e3789906-381e-4cc0-977c-37830aca8658

Code

export function Projects() {
    const ctx = useAppContext()

    function windowMove(e: MouseEvent, isMaximized: boolean) {
        const target = e.target as HTMLDivElement
        if (target.dataset.whdnl == null) return

        if (!isMaximized) {
            const size = (e.target as HTMLDivElement).getBoundingClientRect()
            if (e.pageX < size.left + 5 || e.pageX > size.right - 5) return
            if (e.pageY < size.top + 5 || e.pageY > size.bottom - 5) return
        }

        appWindow.startDragging()
    }

    return (
        <div class="projects-page" onMouseDown={(e) => windowMove(e, ctx.app.isMaximized)} data-whdnl>
            <div class="titlebar" data-whdnl>
                <TitlebarButtons />
            </div>
            <div class="top-container noselect" data-whdnl>
                <div class="title" data-whdnl>
                    CSV TRANSLATOR
                </div>
            </div>
            <div class="main-container noselect" data-whdnl>
                <div class="column" data-whdnl>
                    <div class="title" data-whdnl>
                        Recent
                    </div>
                </div>
                <div class="column" data-whdnl>
                    <div class="title" data-whdnl>
                        Get started
                    </div>
                </div>
            </div>
        </div>
    )
}