Cursor over line numbers is oversized (Chrome 51)

[bpasero]

Seems like the same issue as microsoft/monaco-editor#5

[alexdima]

@bgashler1 For the standalone editor, I removed this style. As you added these CSS rules, maybe you know what's going on?

[bgashler1]

@alexandrudima it seems that we've gone back to an older Electron version and that this is not currently an issue? I noticed Ben uncommitted the CSS and there don't seem to be problems. Will close for now, since I cannot reproduce in VS Code on Mac with a Retina display. Please reopen if it's still an issue.

A little background: the CSS rules with the 2x sized image was a workaround for this Chrome bug, which causes SVG cursors to be pre-rasterized (as if they were a png) before being rendered, causing pixelation on hdpi screens.

[bpasero]

@bgashler1 we will hit this issue again eventually once we update. Note that the next jump would be to Chrome 52, not sure if that would make a difference.

[bpasero]

Still happens in Chrome 52, reopening.

[bpasero]

No Electron update for August...

[brunnopleffken]

@bpasero Not trying to ignore the issue, but just giving my two cents: really worth being stuck in an old version of Chromium and an equally old "zero-point-x" version of Electron because of an inverted cursor?

Reading their changelog, you're missing a bunch of new features and improvements: https://github.com/electron/electron/releases

[bpasero]

@brunnopleffken this issue does not block our Electron update, but this one electron/electron#5715

Feel free to provide a PR to fix this issue for them 👍

[emeryao]

I got a TEMPORARY solution for this issue:
change the css class of .monaco-editor .margin-view-overlays .line-numbers in file workbench.main.css
with the style below:

cursor: -webkit-image-set(url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='45' widht='30' viewBox='0 0 15 21'%3E%3Cpath fill='%23fff' stroke='%23000' d='M14.5 1.2L1.9 13.8h5.2l-2.6 5.3 3.2 1 2.6-5.2 4.2 3.1z'/%3E%3C/svg%3E") 2x) 30 0,default;

the key of this TEMPORARY solution is the height and width attribute of the svg tag.

[bgashler1]

@emeryao thanks for discovering the width and height issue. Pushing a commit that fixes this at the root of the problem.

---

I also want to mention to anyone else who may experience this same problem on another project that Adobe Illustrator does not save width and height attributes to SVG files by default. They only use viewbox.

I actually couldn't even get a custom image cursor to show up in Chromium version 52 until I added these attributes to the SVG files—Chromium would instead always show whatever fallback cursor I had in the CSS. For example, in the case of cursor: url('flipped-cursor-2x.svg'), crosshair; it would always use cross hair, and if I took crosshair off, it would say that I had an "invalid property value".