"Flipped cursor" is a Windows cursor, even when running VS Code on OS X

[coreh]

Minor cosmetic change suggestion. The cursor displayed when you move your mouse to the line numbers in the editor is a Windows cursor:

https://github.com/Microsoft/vscode/blob/497788c0bcd20859f736d585b49c208af8dd518f/src/vs/editor/browser/viewParts/lineNumbers/flipped-cursor.svg

Ideally we'd display a cursor that matches the current platform. (So OS X it would be black with a white border)

I can write a PR for this if you're okay with it 😄

[bpasero]

Even worse, on retina screens the cursor looks blurry.

[coreh]

That seems to be an issue with the rendering engine, since the cursor image is an SVG and should in theory look fine on all scale factors.

[bgashler1]

Hi Coreh, thanks for catching this issue. Please feel free to do the PR if you would like :)

[bgashler1]

About the blurriness

This is a known issue with Chromium. SVG cursors in Chromium are rasterized before they are displayed, hence the blurriness.
https://bugs.chromium.org/p/chromium/issues/detail?id=325565

My workaround

I was able to address blurriness on webkit browsers (i.e. Chromium) using a -webkit-image-set rule to display appropriate scaled versions for the pixel density of the display. These cursors will now be razor sharp in VS Code.

However, in Monaco online, it may not work on all browsers as nicely, because the spec for image-sets is not adopted widely in browsers and neither is cursor using a URI for an image. This is not a big deal necessarily from a functional perspective, because the cursor has a fallback to the default cursor, but it is kind of annoying consistency wide.

Potential problems related to how this will work in Monaco online

• Edge does not support URI cursors yet.
• IE only supports .cur cursors (we would need a fallback in this format for IE)
• I couldn't seem to get this to work in Firefox, even with the correct syntax. But in theory it should work according to their documentation.

Note to self:

We can easily write a media query to detect hdpi displays like Retina displays (this one courtesy of CSS tricks):

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    .monaco-editor.mac .margin-view-overlays .line-numbers {
    /* Use this cursor on high-dpi screens */
        cursor: url('./flipped-cursor-mac-2x.png') 24 0, default;
    }
}

But we shouldn't need to if browsers can fix these issues for rendering SVG correctly. Also, this unfortunately displays the image twice as big as intended. It seems the only way to go about this is image-sets or SVG where the browser handles it correctly in the vector space without rasterizing it.

[leahparsuidualc-zz]

Dunno, if it is lining up with the mentioned:

Under Ubuntu-Xenial 32-|64-Bit latest the cursor obviously looses its svg (if that one is the one used allover), instead showing off 3-vertical-lines-stacked-vertically. I could not determine a specific surrounding-|environmental- -condition (means: independent of ram-|-usage|-free || available-ressources-in-general || install-specific-differences).

Thing is, that not-really-helping--cursor is from then on the only one that is shown, independent of closing VS Code or not and MAY sometime later (between 10 to unlimited minutes or reboot) switch back to the OS-defined.

Any idea, where's the right point to hook into such an issue?

[bgashler1]

@claudiusraphael this issue is talking about the "flipped cursor" over the line numbers on the left of the editor. Is this the cursor you are not seeing correctly? What exactly is the problem you're seeing (if you can snap a photo of your screen, that would be helpful).

[leahparsuidualc-zz]

Right now, i have no screenshot available, but as soon as i got into that condition again AND remember that i asked for a solution ;) i will spend a bucket full;

What brought me to the idea that it is (at least) in relation to this issue, is that the area whereas the cursor showed the (seemingly based on missing graphic - comparable to a javascript that can't get the image to be loaded quick enough due to async call, so in the end is missing at runtime) is the one that is described here as base for the 'flipping-cursor-problem';

As i already told, i could not see a fixed|reproducible way to 'enable' the 'weird cursor'. But from the last things i remember, whereas the cursor got humbled that way, just showing off it's ghost, instead of the normal VS-Code- or System-|-Cursor|-Pointer, it have had happened when e.g.: enabling the debugger, changing view-modes, adding by-intellisense-parsible definitions
AND : hovering the before-described-area
, if you understand what i am talking about; sorry, i am not used to the VS-Code-specific terms.

Maybe you have an idea, whereas and how i could watch|debug VS-Code itself by a condition that would alert an activation of the flipping-cursor-issue and therefore probably leads to a reproducible pointer-ghost-issue?

:) Sorry, no other way to explain it, right now.

But thanks, for your fast response.

[bgashler1]

@claudiusraphael if I'm understanding you correctly, then this cursor disappearing problem you are having is happening not just in VSCode, but it's also happening throughout your operating system. Or is it just within VS Code?

[bgashler1]

Reopening until I test this on Windows, since I also fixed the blurry cursor on Windows

[coreh]

Had forgotten about this issue. Has been fixed for a while now. Thanks! Closing.