search

electron / electron

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
https://electronjs.org
MIT License
114.18k stars 15.4k forks source link

Renderings start sticking when a transparent electron window loses and comes back into focus #8557

Closed bakkiraju closed 7 years ago

bakkiraju commented 7 years ago

Expected behavior

Should not be seeing Ghost renderings in a transparent electron window when it goes out and comes back into focus

Actual behavior

I am using jquery flipster plugin using a transparent electron window, I can do a carousel effect all day long without any problems as long as my electron transparent window is in focus but once I open some other app and comeback to my electron window the divs added to the flipster,start getting sticky and I see ghost images getting rendered. Trying to always keep electron window on the top doesnt help, de-focus and focus back causes rendering to stick

How to reproduce

https://github.com/bakkiraju/flipster_electron

You can checkout, do npm install and npm start to run, you should see some divs with val and string, use mouse clicks to play with carousel, bring some other window into focus, go back to electron window and see what I am describing

groundwater commented 7 years ago

Thanks for the report @bakkiraju - we'll review the issue and get back to you within the next 7 days. If you're able to isolate the issue, we're always happy for the help.

bakkiraju commented 7 years ago

Thanks guys for all the help. Any insight into what might be causing the this issue. Also is there some guideline and an API to redraw / re-render contents of the window through electron API that I am missing ?. Looking at the behavior of this carousel plugin I feel that I should just call re-draw on content change/update event.

zeke commented 7 years ago

@bakkiraju I am experiencing a similar issue with one of my apps, but am unable to consistently reproduce it:

screen shot 2017-02-08 at 4 23 37 pm

I started cloning your repo but it's too big for the wifi in this coworking space! 📡

I have a few suggestions:

  1. Try updating to the latest beta version of Electron: npm i -D electron@beta (currently 1.6.0)

  2. Try setting the hasShadow option to false when instantiating the BrowserWindow instance.

bakkiraju commented 7 years ago

electron 1.6.0 seems to fix the stickiness issue without setting hasShadow to false.

bakkiraju commented 7 years ago

Want to correct above stmt, hasShadow: false indeed helps

zeke commented 7 years ago

Glad that fixed it. Thanks for reporting back, @bakkiraju

TomasHubelbauer commented 4 months ago

As of Electron 31, the issue is still there without hasShadow: false. Maybe not in all cases it used to be in, but I do have a repro which still exhibits the behavior today: https://github.com/TomasHubelbauer/electron-lingering-shadow-repro. I've commented on https://github.com/electron/electron/issues/8847 which was the issue I came across first regarding this. I believe one of the window ghosting issues should be reopened as this issue is not fully resolved even in latest Electron.