Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transparency + Click-through clicks through floated elements #4846

Closed
SomeoneIsWorking opened this issue May 13, 2016 · 9 comments
Closed

Transparency + Click-through clicks through floated elements #4846

SomeoneIsWorking opened this issue May 13, 2016 · 9 comments

Comments

@SomeoneIsWorking
Copy link

SomeoneIsWorking commented May 13, 2016

Update:

I got it working by setting initial width and height to big numbers. It didn't work because resizing done via win.resizeTo(screen.availWidth, screen.availHeight); wasn't affecting the clickable area apparently
  • nw.js v0.14.3 x64
  • Windows 10 x64 Home, Build 10586

I can click on divs when they don't float but clicks go through them when they float

Style: div.right {width: 200px; float: right;}
Same issue with .parent {position:relative;}.child{position:absolute;right:0;} instead of float:right

Clicking at where-they-would-be-without-float doesn't work either (if it's any relevant)

image

-- Extra info --

Ran with nw . --disable-gpu --force-cpu-draw

window

"frame": false,
"toolbar": false,
"transparent": true,
"resizable": false

body style

body {
    background-color:rgba(0,0,0,0);
}

Please tell me if I missed anything I'll update

@rogerwang
Copy link
Member

@jtg-gg could you please check this?

@jtg-gg
Copy link
Member

jtg-gg commented May 16, 2016

@needo2 can you send me the sample app as zip file ?

@SomeoneIsWorking
Copy link
Author

I put it on tinyupload because when I try to upload here, it rejects saying file type isn't supported even that it's a zip
http://s000.tinyupload.com/index.php?file_id=03419548818930588927

@jtg-gg
Copy link
Member

jtg-gg commented May 18, 2016

@needo2 I am still debugging, but I found a work around, if you specify the initial window (in package.json) big enough, then resize it down, it will works, but I know it is ugly

@jtg-gg
Copy link
Member

jtg-gg commented May 18, 2016

@needo2 I've it fixed, waiting for @rogerwang to accept my pull request nwjs/chromium.src#18

@rogerwang
Copy link
Member

This is fixed in git and will be available in the next nightly build.

@wis
Copy link

wis commented May 24, 2016

@jtg-gg @rogerwang i'm having a similar issue, and I think it's the same cause.
https://github.com/jtg-gg/chromium.src/blob/cdeae7658e12fea2d3a2ff9b1dd719a0064d3b6f/ui/views/win/hwnd_message_handler.cc#L1157
i'm running nwjs-sdk-v0.15.0-rc2-win-x64(meaning I didn't have the fixed next nightly build bits?@rogerwang ), Windows 10 14323. and I have a dual monitor setup, my laptop on the left and 1080p monitor on the right.
I have a transparent, frameless, non resizable, fullscreen window (bounds gets set problematically to cover all screens bounds), click through enabled (gpu disabled, force cpu)
after interacting with the elements on the page a few times (clicking, dragging etc), the issue occurs, which is that the window visible (does not get minimize or resized or anything, stays as it is visible) but can't click the elements anymore, and I can right click on the element and the desktop context menu opens, meaning it is clicking through the element.

@jtg-gg i tried your quick ugly fix, and did set both width's and height's initial values of the window to 10000 and after load set them to (calculated all screens size) (the dual monitors in my case), after that there was an improvement, it fixed the dragging on the laptop's screen (left) all the way to the right to far 1/4 left of the second screen, but after I pass that area with dragging the rectangle the window becomes "all click throughable".

long comment, but I hope my description of the issue can help you diagnose the cause and fix it.

@jtg-gg
Copy link
Member

jtg-gg commented May 24, 2016

@wesamco I've fixed the issue, can you try the latest nightly build ?
do you still have problem ? if yes, can send me a small app so I can debug it

@wis
Copy link

wis commented May 24, 2016

@jtg-gg I installed the latest nightly build, and tried it, the issue wasn't fixed.
here is a video capture https://www.youtube.com/watch?v=0Y8MwzwIFUc

  • the bug is not in my code, the window covers all the screens, I can drag the rectangle to the far left of the second monitor and the white 50 px thick solid border is to prove that the window extends to all the screens.
  • I think i found what is the issue,
    https://github.com/jtg-gg/chromium.src/blob/cdeae7658e12fea2d3a2ff9b1dd719a0064d3b6f/ui/views/win/hwnd_message_handler.cc#L1157
    in this method, the new updated clickable bounds of the window gets updated to wrong clickable bounds, which seems to be the bounds of the primary screen, but the bounds of the window does not change, see the white border, in the Screen shot.
  • see the screenshot and explanation,
    the horizontal red line seperates the two monitors, and the blue line marks the far right end of the updated clickable bounds, they are the exact same bounds of the primary screen of the system, I counted the pixels with the Paint select tool..
  • the clickable bounds update seems to happen on mouse up event, because I can drag the rectangle to the far far right with only one drag and then I can't click it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants