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

Rendering bug causing "stuck" graph images with Cytoscape.js and Electron #6803

Closed
josephst opened this Issue Aug 10, 2016 · 9 comments

Comments

Projects
None yet
4 participants
@josephst
  • Electron version: 1.3.3
  • Operating system: OS X 10.11.6

As part of Google Summer of Code 2016 I've been working on a project using Cytoscape.js and Electron. Electron appears to have a bug where graph movement does not update properly, resulting in "ghost" images. This is most apparent with the graph but also happens with qTip2 boxes and the Font Awesome loading spinner.

I've tested with Cytoscape.js versions 2.4 - 2.7.7 (occurs with all versions) and Electron 1.2 - 1.3. Similar code runs in Chrome 52 without issue. The issue appears Mac specific; I have been unable to recreate the issue on Windows. The project is in this folder and the bug can be reproduced with npm install && npm start, then clicking "Start Graph" (with input box empty) and dragging the graph around.

screen shot 2016-08-03 at 12 57 31 pm

@zcbenz

This comment has been minimized.

Show comment
Hide comment
@zcbenz

zcbenz Aug 11, 2016

Contributor

Can you try whether simple usages of Cytoscape.js work correctly in Electron? I would like to know whether the bug is triggered by the code of Cytoscape.js or your app.

Contributor

zcbenz commented Aug 11, 2016

Can you try whether simple usages of Cytoscape.js work correctly in Electron? I would like to know whether the bug is triggered by the code of Cytoscape.js or your app.

@maxkfranz

This comment has been minimized.

Show comment
Hide comment
@maxkfranz

maxkfranz Aug 12, 2016

IIRC, the issue occurs even without Cytoscape.js on the page. Even the Font Awesome spinner has the artefact.

The issue doesn't happen after you refresh the Electron window (command+r), which is weird...

maxkfranz commented Aug 12, 2016

IIRC, the issue occurs even without Cytoscape.js on the page. Even the Font Awesome spinner has the artefact.

The issue doesn't happen after you refresh the Electron window (command+r), which is weird...

@maxkfranz

This comment has been minimized.

Show comment
Hide comment
@maxkfranz

maxkfranz Aug 12, 2016

And the main.js file that handles the electron.app doesn't do anything outside of what the Electron tutorial has.

And the main.js file that handles the electron.app doesn't do anything outside of what the Electron tutorial has.

@zcbenz

This comment has been minimized.

Show comment
Hide comment
@zcbenz

zcbenz Aug 17, 2016

Contributor

Sorry but I don't think any of us would have time to investigate this without a minimal reproducible case.

Contributor

zcbenz commented Aug 17, 2016

Sorry but I don't think any of us would have time to investigate this without a minimal reproducible case.

@maxkfranz

This comment has been minimized.

Show comment
Hide comment
@maxkfranz

maxkfranz Aug 17, 2016

@zcbenz OK, the issue has been isolated a bit. One of the necessary conditions is to use flex in the CSS. @josephst is working on making a minimal demo for you based on a fork of https://github.com/electron/electron-quick-start with a couple small additions

@zcbenz OK, the issue has been isolated a bit. One of the necessary conditions is to use flex in the CSS. @josephst is working on making a minimal demo for you based on a fork of https://github.com/electron/electron-quick-start with a couple small additions

@josephst

This comment has been minimized.

Show comment
Hide comment
@josephst

josephst Aug 21, 2016

I've made a demo for the issue here.

The application is based on a fork of the electron-quick-start app with Cytoscape.js 2.7.8 and a flexbox-based layout. The issue is most apparent when rapidly panning the graph and when using graphs with many elements. It also occurs, although less frequently, when dragging around nodes in the graph.

picture of issue

I've made a demo for the issue here.

The application is based on a fork of the electron-quick-start app with Cytoscape.js 2.7.8 and a flexbox-based layout. The issue is most apparent when rapidly panning the graph and when using graphs with many elements. It also occurs, although less frequently, when dragging around nodes in the graph.

picture of issue

@josephst

This comment has been minimized.

Show comment
Hide comment
@josephst

josephst Aug 22, 2016

On further investigation I'm able to reproduce the issue with both flexbox-based layouts and standard block layouts.

On further investigation I'm able to reproduce the issue with both flexbox-based layouts and standard block layouts.

@josephst josephst closed this Aug 22, 2016

@josephst

This comment has been minimized.

Show comment
Hide comment
@josephst

josephst Aug 22, 2016

(Apologies for accidentally closing the issue)

(Apologies for accidentally closing the issue)

@josephst josephst reopened this Aug 22, 2016

@kevinsawicki

This comment has been minimized.

Show comment
Hide comment
@kevinsawicki

kevinsawicki Nov 16, 2016

Contributor

@josephst Thanks for the demo app, I tried it out and wasn't able to reproduce your issue using Electron 1.4.7 on macOS 10.11.6. It may have been fixed in the Chrome 53 upgrade that shipped in Electron 1.4.

I'm going to close this out for now, please comment if you are still seeing this on 1.4.7 and we can reopen this issue.

Contributor

kevinsawicki commented Nov 16, 2016

@josephst Thanks for the demo app, I tried it out and wasn't able to reproduce your issue using Electron 1.4.7 on macOS 10.11.6. It may have been fixed in the Chrome 53 upgrade that shipped in Electron 1.4.

I'm going to close this out for now, please comment if you are still seeing this on 1.4.7 and we can reopen this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment