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

VS Code flickers when running on a high DPI external monitor #25934

Closed
jlphelps opened this Issue May 4, 2017 · 84 comments

Comments

@jlphelps

jlphelps commented May 4, 2017

  • VSCode Version: 1.12.0
  • OS Version: OSX Sierra 10.12.4
  • Retina MBP, 15-inch, Mid 2015
  • Graphics: AMD Radeon R9 M370X 2048 MB Intel Iris Pro 1536 MB

Steps to Reproduce:

  1. VS Code maximized (not full screen)
  2. Click in Javascript or HTML file

Extensions installed:

  • dzannotti.vscode-babel-coloring
  • waderyan.babelrc
  • ceps.theme-darcula
  • gerane.theme-dark-dracula
  • HvyIndustries.crane
  • donjayamanne.python

Etc:

  • Occurs when all plugins are disabled
  • Does not occur when window is not in focus
  • Problem did not occur until most recent VS Code update.
  • Occurs on external 4k display at 3360x1890 but not on built-in MBP display at 1920x1200

Happy to provide more info if needed. Thanks so much for all of your great work, I love VS Code!

html_flicker
file_tree_flicker

@yangwen2

This comment has been minimized.

Show comment
Hide comment
@yangwen2

yangwen2 May 4, 2017

I see this effect when I start code with the --disable-gpu parameter

yangwen2 commented May 4, 2017

I see this effect when I start code with the --disable-gpu parameter

@jrnail23

This comment has been minimized.

Show comment
Hide comment
@jrnail23

jrnail23 May 4, 2017

same issue here. entire chunks of text in the editor become invisible as well.

jrnail23 commented May 4, 2017

same issue here. entire chunks of text in the editor become invisible as well.

@jrnail23

This comment has been minimized.

Show comment
Hide comment
@jrnail23

jrnail23 May 4, 2017

FYI, setting "editor.cursorBlinking": "solid" seems to have helped

jrnail23 commented May 4, 2017

FYI, setting "editor.cursorBlinking": "solid" seems to have helped

@kieferrm

This comment has been minimized.

Show comment
Hide comment
@kieferrm

kieferrm May 4, 2017

Contributor

@jrnail23 do you start up with --disable-gpu?

Contributor

kieferrm commented May 4, 2017

@jrnail23 do you start up with --disable-gpu?

@jlphelps

This comment has been minimized.

Show comment
Hide comment
@jlphelps

jlphelps May 4, 2017

I see a lot of flickering when scrolling as well. I am not starting with --disable-gpu.

If I reduce my display resolution to 3008x1692 (from 3360x1890) and maximize VS code the problem goes away.

jlphelps commented May 4, 2017

I see a lot of flickering when scrolling as well. I am not starting with --disable-gpu.

If I reduce my display resolution to 3008x1692 (from 3360x1890) and maximize VS code the problem goes away.

@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero

bpasero May 5, 2017

Member

@jlphelps can you try some more things and answer to some more questions:

  • does it reproduce when you disable either of the GPUs (I assume your Mac has discrete and integrated GPU, so maybe it is related to one of them?)
  • does it flicker only in specific views (e.g. the explorer) or also in all other views (search, scm)?
  • which parts specifically flicker, can you maybe record a video?
  • does it flicker when you zoom in (from the View menu)?

@jrnail23 can you share a video of how this looks for you when this happens, maybe what you see is unrelated to the flickering? And are you saying the issue is totally gone after changing the blinking cursor?

@yangwen2 can you clarify what you are seeing and when it happens?

Member

bpasero commented May 5, 2017

@jlphelps can you try some more things and answer to some more questions:

  • does it reproduce when you disable either of the GPUs (I assume your Mac has discrete and integrated GPU, so maybe it is related to one of them?)
  • does it flicker only in specific views (e.g. the explorer) or also in all other views (search, scm)?
  • which parts specifically flicker, can you maybe record a video?
  • does it flicker when you zoom in (from the View menu)?

@jrnail23 can you share a video of how this looks for you when this happens, maybe what you see is unrelated to the flickering? And are you saying the issue is totally gone after changing the blinking cursor?

@yangwen2 can you clarify what you are seeing and when it happens?

@jlphelps

This comment has been minimized.

Show comment
Hide comment
@jlphelps

jlphelps May 5, 2017

@bpasero

  • Disabling/enabling automatic graphics switching does not seem to have an impact.
  • All views, even terminal
  • Video: https://www.youtube.com/watch?v=mgFGqzZbrCY
  • It does not occur when zoomed in. After zooming in and zooming out the problem goes away until I restart the app.

Additionally, the problem only seems to occur when I have the editor split 3 ways. 0 or 1 splits seems fine.

jlphelps commented May 5, 2017

@bpasero

  • Disabling/enabling automatic graphics switching does not seem to have an impact.
  • All views, even terminal
  • Video: https://www.youtube.com/watch?v=mgFGqzZbrCY
  • It does not occur when zoomed in. After zooming in and zooming out the problem goes away until I restart the app.

Additionally, the problem only seems to occur when I have the editor split 3 ways. 0 or 1 splits seems fine.

@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero

bpasero May 5, 2017

Member

@jlphelps can you share your settings file?

Member

bpasero commented May 5, 2017

@jlphelps can you share your settings file?

@jlphelps

This comment has been minimized.

Show comment
Hide comment
@jlphelps

jlphelps May 5, 2017

@bpasero These are the only overrides, everything else is default:

// Place your settings in this file to overwrite the default settings
{
    "window.zoomLevel": 0,
    "workbench.colorTheme": "Darcula",
    "editor.minimap.enabled": false
}

jlphelps commented May 5, 2017

@bpasero These are the only overrides, everything else is default:

// Place your settings in this file to overwrite the default settings
{
    "window.zoomLevel": 0,
    "workbench.colorTheme": "Darcula",
    "editor.minimap.enabled": false
}
@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero

bpasero May 5, 2017

Member

@jlphelps does it reproduce if you configure this in settings:

"editor.disableTranslate3d": true

Member

bpasero commented May 5, 2017

@jlphelps does it reproduce if you configure this in settings:

"editor.disableTranslate3d": true

@jlphelps

This comment has been minimized.

Show comment
Hide comment
@jlphelps

jlphelps May 5, 2017

@bpasero The problem goes away with that setting, but only after I restart the app. If I remove the setting and restart the app the problem comes back.

jlphelps commented May 5, 2017

@bpasero The problem goes away with that setting, but only after I restart the app. If I remove the setting and restart the app the problem comes back.

@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero

bpasero May 5, 2017

Member

@jlphelps to be clear, when you define this setting and restart, the issue is resolved across all UI elements for you including editor and tree?

Member

bpasero commented May 5, 2017

@jlphelps to be clear, when you define this setting and restart, the issue is resolved across all UI elements for you including editor and tree?

@jlphelps

This comment has been minimized.

Show comment
Hide comment
@jlphelps

jlphelps May 5, 2017

@bpasero Looking at it again this setting resolves the issue when in tree, search, and debug views, but not in source control and extensions.

jlphelps commented May 5, 2017

@bpasero Looking at it again this setting resolves the issue when in tree, search, and debug views, but not in source control and extensions.

@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero

bpasero May 5, 2017

Member

@joaomoreno we removed all uses of translate3d in the list, didn't we?

@jlphelps does this issue only show when you scroll the editor or also by just waiting or clicking?

Member

bpasero commented May 5, 2017

@joaomoreno we removed all uses of translate3d in the list, didn't we?

@jlphelps does this issue only show when you scroll the editor or also by just waiting or clicking?

@jlphelps

This comment has been minimized.

Show comment
Hide comment
@jlphelps

jlphelps May 5, 2017

@bpasero without the editor.disableTranslate3d setting it occurs by waiting or clicking in addition to scrolling the editor. The flicker seems to coincide with the cursor blinking.

The behavior is the same with editor.disableTranslate3d enabled and in Source view, but sometimes entire sections of the code disappear rather than blinking.

jlphelps commented May 5, 2017

@bpasero without the editor.disableTranslate3d setting it occurs by waiting or clicking in addition to scrolling the editor. The flicker seems to coincide with the cursor blinking.

The behavior is the same with editor.disableTranslate3d enabled and in Source view, but sometimes entire sections of the code disappear rather than blinking.

@willium

This comment has been minimized.

Show comment
Hide comment
@willium

willium May 6, 2017

Same issue here.
Only occurs when window is maximized on my external monitor (and not on my primary monitor).
I can also report that adding "editor.disableTranslate3d": true fixes the issue in some views but not others (doesn't fix in source, plugins, settings, ...)
It does occur when disabling all extensions.
It does occur when disabling all disabling gpu.
It does occur when waiting and clicking.
It also causes scrolling to be staggered.

willium commented May 6, 2017

Same issue here.
Only occurs when window is maximized on my external monitor (and not on my primary monitor).
I can also report that adding "editor.disableTranslate3d": true fixes the issue in some views but not others (doesn't fix in source, plugins, settings, ...)
It does occur when disabling all extensions.
It does occur when disabling all disabling gpu.
It does occur when waiting and clicking.
It also causes scrolling to be staggered.

@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero

bpasero May 6, 2017

Member

@willium do you have similar hardware as @jlphelps? is that a high DPI monitor external?

Can you guys try to reproduce this using normal Chrome on this page that hosts our editor: https://microsoft.github.io/monaco-editor/

Member

bpasero commented May 6, 2017

@willium do you have similar hardware as @jlphelps? is that a high DPI monitor external?

Can you guys try to reproduce this using normal Chrome on this page that hosts our editor: https://microsoft.github.io/monaco-editor/

@camstuart

This comment has been minimized.

Show comment
Hide comment
@camstuart

camstuart May 6, 2017

Same problem for me too, but "editor.disableTranslate3d": true definitely helped

camstuart commented May 6, 2017

Same problem for me too, but "editor.disableTranslate3d": true definitely helped

@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero

bpasero May 6, 2017

Member

@camstuart even no more flickering in the tree views (try explorer and scm)?

Member

bpasero commented May 6, 2017

@camstuart even no more flickering in the tree views (try explorer and scm)?

@willium

This comment has been minimized.

Show comment
Hide comment
@willium

willium May 6, 2017

Weirdly, it only seems to happen at the second-highest DPI my monitor offers: 3360x1890, and the third-highest: 3008x1692. At 3840x2160, it preforms well. It's happening on my Dell P2715Q. Here are my HW specs
screen shot 2017-05-06 at 1 48 10 pm

willium commented May 6, 2017

Weirdly, it only seems to happen at the second-highest DPI my monitor offers: 3360x1890, and the third-highest: 3008x1692. At 3840x2160, it preforms well. It's happening on my Dell P2715Q. Here are my HW specs
screen shot 2017-05-06 at 1 48 10 pm

@justinbowes

This comment has been minimized.

Show comment
Hide comment
@justinbowes

justinbowes Aug 11, 2017

"editor.disableTranslate3d": true was insufficient in my case. On my MBP (Mid 2015, 15-inch retina, 4k external display) I needed to set the external display scaling to "Looks like 3008 x 1692" (3/5) and the internal display scaling to "Looks like 1680 x 1050" (4/5). Each was previously set one level higher (i.e. internal display at 1920 x 1200).

No restart of VS Code was necessary; flickering stopped immediately after changing these settings.

Since the resolution was this high primarily to see lots of code, I'm simply adjusting the zoom level in VS Code to compensate for now.

justinbowes commented Aug 11, 2017

"editor.disableTranslate3d": true was insufficient in my case. On my MBP (Mid 2015, 15-inch retina, 4k external display) I needed to set the external display scaling to "Looks like 3008 x 1692" (3/5) and the internal display scaling to "Looks like 1680 x 1050" (4/5). Each was previously set one level higher (i.e. internal display at 1920 x 1200).

No restart of VS Code was necessary; flickering stopped immediately after changing these settings.

Since the resolution was this high primarily to see lots of code, I'm simply adjusting the zoom level in VS Code to compensate for now.

@TedDriggs

This comment has been minimized.

Show comment
Hide comment
@TedDriggs

TedDriggs Aug 29, 2017

I tried the provided setting on a 13" MBP, but that didn't stop flickering on the inboard and external displays. I'm running Sierra 10.12.5

TedDriggs commented Aug 29, 2017

I tried the provided setting on a 13" MBP, but that didn't stop flickering on the inboard and external displays. I'm running Sierra 10.12.5

@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero

bpasero Aug 31, 2017

Member

I just created a test build of VS Code Insiders with a newer Electron version (1.7.7) which includes a fix from Chrome for the flickering on high DPI monitors. Can people still seeing this issue give this build a try to see if that makes the situation better?

Thanks!

Member

bpasero commented Aug 31, 2017

I just created a test build of VS Code Insiders with a newer Electron version (1.7.7) which includes a fix from Chrome for the flickering on high DPI monitors. Can people still seeing this issue give this build a try to see if that makes the situation better?

Thanks!

@jlphelps

This comment has been minimized.

Show comment
Hide comment
@jlphelps

jlphelps Aug 31, 2017

Thanks for the build, @bpasero! I took it for a quick spin and the flicker seems to be gone. It does feel slightly less performant, though -- there's a bit of a lag to scrolling that isn't present in 1.15.1.

jlphelps commented Aug 31, 2017

Thanks for the build, @bpasero! I took it for a quick spin and the flicker seems to be gone. It does feel slightly less performant, though -- there's a bit of a lag to scrolling that isn't present in 1.15.1.

@joshvickerson

This comment has been minimized.

Show comment
Hide comment
@joshvickerson

joshvickerson Aug 31, 2017

Thanks, @bpasero! Opened up a couple large files in split pane, opened the integrated terminal - a situation that causes a lot of flickering for me in 1.15.1. Been poking around for only 5 minutes and there hasn't been any flickering so far, but given the flickering starts right away in the current build, I'm comfortable saying it's gone for me.

I'll also note I'm not experiencing the scroll lag @jlphelps is having.

joshvickerson commented Aug 31, 2017

Thanks, @bpasero! Opened up a couple large files in split pane, opened the integrated terminal - a situation that causes a lot of flickering for me in 1.15.1. Been poking around for only 5 minutes and there hasn't been any flickering so far, but given the flickering starts right away in the current build, I'm comfortable saying it's gone for me.

I'll also note I'm not experiencing the scroll lag @jlphelps is having.

@jorng

This comment has been minimized.

Show comment
Hide comment
@jorng

jorng Sep 1, 2017

I was having this issue too, but the insiders build fixes it for me.

jorng commented Sep 1, 2017

I was having this issue too, but the insiders build fixes it for me.

@daB0bby

This comment has been minimized.

Show comment
Hide comment
@daB0bby

daB0bby Sep 7, 2017

For me it's gone with version 1.16.0.

daB0bby commented Sep 7, 2017

For me it's gone with version 1.16.0.

@jlphelps

This comment has been minimized.

Show comment
Hide comment
@jlphelps

jlphelps Sep 7, 2017

I've updated to 1.16.0 and the issue is still present but does seem to have improved a bit.

jlphelps commented Sep 7, 2017

I've updated to 1.16.0 and the issue is still present but does seem to have improved a bit.

@teki

This comment has been minimized.

Show comment
Hide comment
@teki

teki Sep 7, 2017

According to the bug reported in the chrome project, the issue is scheduled to be released with chrome 61 (which was released a few days ago). VS Code is a few releases behind chrome:
"In this release, we updated from Electron 1.6.6 to 1.7.3. This brings a Chrome update from version 56 to 58 and Node.js from 7.4 to 7.9."

teki commented Sep 7, 2017

According to the bug reported in the chrome project, the issue is scheduled to be released with chrome 61 (which was released a few days ago). VS Code is a few releases behind chrome:
"In this release, we updated from Electron 1.6.6 to 1.7.3. This brings a Chrome update from version 56 to 58 and Node.js from 7.4 to 7.9."

@teki

This comment has been minimized.

Show comment
Hide comment
@teki

teki Sep 7, 2017

Ok, I just tested Chrome 61 and the issue is still present, so don't expect a fix too soon.

teki commented Sep 7, 2017

Ok, I just tested Chrome 61 and the issue is still present, so don't expect a fix too soon.

@dmnlk

This comment has been minimized.

Show comment
Hide comment
@dmnlk

dmnlk Sep 8, 2017

1.16.0 → still have issue
@bpasero 's insider version → fixed issue

on OS X Sierra

dmnlk commented Sep 8, 2017

1.16.0 → still have issue
@bpasero 's insider version → fixed issue

on OS X Sierra

@bpasero bpasero modified the milestones: September 2017, Backlog Sep 8, 2017

@bpasero

This comment has been minimized.

Show comment
Hide comment
@bpasero
Member

bpasero commented Sep 8, 2017

@bpasero bpasero closed this Sep 8, 2017

@sandy081 sandy081 added the verified label Sep 28, 2017

@willium

This comment has been minimized.

Show comment
Hide comment
@willium

willium Sep 29, 2017

The issue is not fixed with 1.16.1 for me @bpasero, but your insider's version does fix it.

willium commented Sep 29, 2017

The issue is not fixed with 1.16.1 for me @bpasero, but your insider's version does fix it.

@xizhao

This comment has been minimized.

Show comment
Hide comment
@xizhao

xizhao Oct 3, 2017

Same here, 1.16.1 is not fixed. OSX

xizhao commented Oct 3, 2017

Same here, 1.16.1 is not fixed. OSX

@ambroselittle

This comment has been minimized.

Show comment
Hide comment
@ambroselittle

ambroselittle Oct 4, 2017

I initially reported this as fixed with the disableTranslate3d setting, but that seems hit and miss. So far the only mostly reliable solution is to shrink the window until it stops doing that. Would like to use this full screen, though!

ambroselittle commented Oct 4, 2017

I initially reported this as fixed with the disableTranslate3d setting, but that seems hit and miss. So far the only mostly reliable solution is to shrink the window until it stops doing that. Would like to use this full screen, though!

@dmnlk

This comment has been minimized.

Show comment
Hide comment
@dmnlk

dmnlk Oct 4, 2017

in 1.17 insider, issue occurred again

dmnlk commented Oct 4, 2017

in 1.17 insider, issue occurred again

@dsifford

This comment has been minimized.

Show comment
Hide comment
@dsifford

dsifford Oct 5, 2017

Still happening for me on linux as well.

VSCode: v1.17.0
OS: Linux 4.13.3-1-ARCH x86_64 GNU/Linux

EDIT: Nevermind, I think we might be good. I had an instance of Atom open as well when I closed out and restarted VSCode. I think they might have shared the old Electron process or something. Closed both and reopened VSCode and it went away (as far as I can tell)

dsifford commented Oct 5, 2017

Still happening for me on linux as well.

VSCode: v1.17.0
OS: Linux 4.13.3-1-ARCH x86_64 GNU/Linux

EDIT: Nevermind, I think we might be good. I had an instance of Atom open as well when I closed out and restarted VSCode. I think they might have shared the old Electron process or something. Closed both and reopened VSCode and it went away (as far as I can tell)

@arb

This comment has been minimized.

Show comment
Hide comment
@arb

arb Oct 5, 2017

Still happening to me on OSX 10.12.6 using VSC 1.17.0.

I tried "editor.disableTranslate3d": true but VSC says it's an unknown setting so I'm doubtful it's being honored.

arb commented Oct 5, 2017

Still happening to me on OSX 10.12.6 using VSC 1.17.0.

I tried "editor.disableTranslate3d": true but VSC says it's an unknown setting so I'm doubtful it's being honored.

@chrisnicola

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Oct 19, 2017

Seeing terrible flickering with the latest version after opening the terminal. Completely unusable in fullscreen at this point.

chrisnicola commented Oct 19, 2017

Seeing terrible flickering with the latest version after opening the terminal. Completely unusable in fullscreen at this point.

@oodavid

This comment has been minimized.

Show comment
Hide comment
@oodavid

oodavid Oct 20, 2017

@chrisnicola Same for me, a recurring problem.

oodavid commented Oct 20, 2017

@chrisnicola Same for me, a recurring problem.

@chrisnicola

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Oct 23, 2017

@oodavid turns out my issue was a corrupt VSCode, which it eventually reported to me. Deleting and re-installing was the solution.

chrisnicola commented Oct 23, 2017

@oodavid turns out my issue was a corrupt VSCode, which it eventually reported to me. Deleting and re-installing was the solution.

@felipenmoura

This comment has been minimized.

Show comment
Hide comment
@felipenmoura

felipenmoura Nov 6, 2017

Wouldn't it be related to electron?
I noticed this same problem in both VSCode and Rambox, both made with electron.
Also, I feel like the problem is much stronger when they both are opened at the same time.
By the way, adding editor.disableTranslate3d is marked as "unknown option" for me, but still looks like the problem is solved!

EDIT: Just realized it had already been closed exactly because it was connected to another issue, in electron! :)

felipenmoura commented Nov 6, 2017

Wouldn't it be related to electron?
I noticed this same problem in both VSCode and Rambox, both made with electron.
Also, I feel like the problem is much stronger when they both are opened at the same time.
By the way, adding editor.disableTranslate3d is marked as "unknown option" for me, but still looks like the problem is solved!

EDIT: Just realized it had already been closed exactly because it was connected to another issue, in electron! :)

@cottrellio

This comment has been minimized.

Show comment
Hide comment
@cottrellio

cottrellio Nov 14, 2017

Just thought I'd add my 2 cents. I have been using VS Code for over a year on this monitor and this is a new issue for me. "editor.disableTranslate3d": true seems to have fixed it for me, so thank you for that!

Version 1.18.0 (1.18.0)

cottrellio commented Nov 14, 2017

Just thought I'd add my 2 cents. I have been using VS Code for over a year on this monitor and this is a new issue for me. "editor.disableTranslate3d": true seems to have fixed it for me, so thank you for that!

Version 1.18.0 (1.18.0)

@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 17, 2017

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