Nw.js: -webkit-app-region dragging not working after window resize from bottom

Created on 21 Sep 2014 · 24Comments · Source: nwjs/nw.js

If you create a new page with an element (div) spanning across the top, assign "-webkit-app-region: drag;" to it's css then resize the window from the bottom. (drag the bottom of the window up/down) and attempt to use drag the window from that top element, nothing happens. Tested in Both 32 and 64 bit versions of node-webkit on Mavericks. (v0.10.5 and v0.10.4)

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Source

JonathanRowley

Most helpful comment

@rogerwang is there a fix planned for this? Having the same issue in nw13 alpha7

chino23 on 23 Dec 2015

👍2

All 24 comments

Been trying to find the cause of this issue for weeks, glad you got it reproable so simply!

tommoor on 22 Sep 2014

A note that might help debug - maximizing/restoring the window seems to restore draggability

tommoor on 22 Sep 2014

Another note that might help debug - resizing the window from the right side also seems to restore draggability.

willbarrett on 22 Sep 2014

A workaround for now is to resize the window object. This produces a small flash of white but at least the draggable area is draggable again.

var win = nw.Window.get();
win.width = win.width + 1;
win.width = win.width - 1;

Ideally this should be registered to a window height resize event or a mouseover event over your draggable area.

Hope this helps anyone affected.

JonathanRowley on 1 Oct 2014

Also just to note: you can't +1 and -1 in the same statement as this doesn't seem to release the draggable area. :(

JonathanRowley on 1 Oct 2014

See #2483. I ran into it too and created a sample app to reproduce.

PS. To restore draggability, all you have the user has to do is resize horizontally.

adam-lynch on 20 Oct 2014

:+1: I've ran into this issue in my app as well, doing the width +1/-1 thing does the trick, but if you're looking for it, it looks really bad.

imjoshdean on 3 Dec 2014

I'm also very interested in a fix!

Wunderkemmer on 4 Dec 2014

@JonRowley
You, cool~.
I have written some code like this from your thoughts.

            mainWindow.current_height = mainWindow.height;
            var resizeHandler = null;
            mainWindow.on("resize", function (width, height) {
                if(mainWindow.current_height != height) {
                    if (resizeHandler) {
                        clearTimeout(resizeHandler);
                    }
                    resizeHandler = setTimeout(function () {
                        this.resizeBy(1, 0);
                        this.resizeBy(-1, 0);
                    }, 100);
                    mainWindow.current_height = height;
                }

            });

newoverguy on 12 Jan 2015

@newoverguy How does this look when you're resizing though? Does it look like it stutters?

imjoshdean on 12 Jan 2015

@imjoshdean
I tried using the code above.
With timeHandler (timeoutHandler) is fantastic compared to when not in use.
When fully granted a timeout move smoothly during resize operations
( I gave 500 ms)

aretias-kr on 13 Jan 2015

Most of draggable regions are at the top of window and maybe with width:100%. But if the element region doesn't be changed in window resize, it still can not be draggable.

This workaround uses two hidden elements to make sure node-webkit to update the draggable regions.

<style>
  body,html{
    padding:0;
    margin:0;
  }
  #top-fix,#bottom-fix{
    -webkit-app-region: no-drag;
    height:0px;
    width:100%;
    position:absolute;

    left:0;
    z-index:0;
    background:red;
  }
  #top-fix{
       top:0;
  }
  #bottom-fix{
    bottom:0;
  }
  #test{
    -webkit-app-region: drag;
    background:black;
     height:100px; 
     width:100px;
     z-index:0;
     position:absolute;
     top:0;
     left:0;
  }
</style>


<div id="top-fix"></div>
<div id="test" ></div>
<div id="bottom-fix"></div>

iwege on 6 Feb 2015

@iwege Your solution is basically black magic to me, but it works.

Thank you! :+1:

imjoshdean on 17 Feb 2015

@iwege Your solution is completely worked for me.

Thank you very much!

eavae on 5 Mar 2015

My scenario may be different, but I was able to slim @iwege's solution down to a single div at the bottom of my app body.

<body>
  <!-- app content here -->
  <div style="-webkit-app-region: no-drag;"></div>
</body>

The other CSS rules didn't appear to have any effect. The element at the top didn't appear to have any effect for me either. The bottom element with the no-drag rule seems to be all you need.

chevtek on 30 Mar 2015

👍2

@chevex Yes , the no-drag rules is the key of my solution because node-webkit will update the draggable region when user resize the element which has -webkit-app-region rule. All other rules is make the element invisible with user.

And if you have an element at the bottom of your app and can be resized by window resizing , you can just add this rule to that element without add any redundant div element.

iwege on 30 Mar 2015

This is the most irritating bug. I still have it happen sometimes, even with the CSS fixes above and even with the width resizing scripts. It's getting old :(

chevtek on 27 May 2015

I've been trying to get one of these solutions to work, and I can't figure it out. No matter what I do you can't drag the window unless I maximize then unmaximize the window. I'll keep playing with it.

octalmage on 10 Sep 2015

Also this happens when my app is opened, it just starts broken.

octalmage on 10 Sep 2015

same issue here, windows resize is not working for me in code..

Karlheinzniebuhr on 12 Sep 2015

Some other observations regarding this issue.

This fixes the drag issue for me when running it at startup.

Window.width += 1;
Window.width -= 1;

However, adding code to focus on the window like below breaks the fix,

Window.width += 1;
Window.width -= 1;
Window.focus();

But, to get around that, wrapping the focus in a short timeout seems to fix that as well,

Window.width += 1;
Window.width -= 1;
setTimeout(function onFocus() {
    Window.focus();
}, 50);

Looks like the bug may be related to how the window is rendered. Just shooting in the dark here, but it looks like the window may try to make it draggable on load, but some other process interrupts (like my Window.focus in my second example) the process before it can make the window draggable, which is why wrapping it in a timeout seems to resolve the issue because it allows it time to finish.

rdfedor on 30 Sep 2015

@rogerwang is there a fix planned for this? Having the same issue in nw13 alpha7

chino23 on 23 Dec 2015

👍2

alo on 7 Jan 2016

👍1

This should be working with latest version now.

In 0.13 we changed to an optimized architecture so more features can be supported, see http://nwjs.io/blog/whats-new-in-0.13/ and it's good for keeping up with Chromium upstream -- we released with Node.js v6.0 and new Chromium versions within 1 day after upstream release.

The new version would fixed many issues reported here and we're scrubbing them. This issue is closed as we believe it should be fixed. Please leave a message if it isn't and we'll reopen it.