CSS and SCSS indentation using tabs is off with lines with the color decorator

[zmoazeni]

• VSCode Version: 1.16.1
• OS Version: Ubuntu Linux 16.04 Gnome

Steps to Reproduce:

1. Start a blank file /tmp/foo.css/
2. Paste this code in there:

/* I've intentionally indented with 2 spaces */
.foo {
  padding: 10px;
  color: #123;
}

3. Go to the bottom right and click the tab size box and select "Convert indentation to Tabs".
4. The color line has slightly different indentation.

Reproduces without extensions: Yes

Here's a screenshot with code --disable-extensions:

Believe me, I prefer spaces for indentation, but I'm on a couple code bases where the team has chosen tabs. And this is a weird annoyance.

This goes away if I set: "editor.colorDecorators": false in the settings.

[alexdima]

Yes, this bug takes three things to surface:

• render whitespace on
• a font where the width of "→" does not equal the width of a single non breaking space
  • ("→" is used for painting a tab)
• an inline decoration on the line

Duplicate of #32436

[zmoazeni]

a font where the width of "→" does not equal the width of a single non breaking space

Ahh I see. Yeah this was using "Droid Sans Mono" which must be the problem with that bit. Switching to Inconsolata has no problem.

Thanks!