Change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes <!-- If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. --<!-- Issues caused by an extension need to be reported directly to the extension publisher. The 'Help Report Issue' dialog can assist with this. --- VS Code Version: 1.75.1 OS Version: macOS 12.6 Steps to Reproduce: any CLI utility that displays a loader animation that uses braille, such as every step of the animation, you should see an array of dots that don't use up a full square space, but leave some blank space and look like a "snake" (this works fine in Windows) This is how it looks in other terminals such as iTerm2 or <img width="33" alt="image" src="https://user-"This is how it looks in VS Code (i've tried changing fonts, it doesn't help) <img width="31" alt="image" src="https://user-"This is the character: On Windows version of VS Code, this behaves correctly on macOS, instead of white space it shows circles with transparent filling
any news?
Hello, it's been half a year and it's been tagged many things, I'd love to know if this is being taked into consideration since it's very bad UX
Interesting that this works on windows but not mac.... This issue reproduces in the monaco editor
it looks like for we are using the python3.9 spinners
I found this - have you tried other fonts?
i found out that it's Chromium's fault, the issue happens in Chrome for macOS and every other child browser, but doesn't happen in Firefox nor Safari, so I opened a bug report there
Looking at it appears that whatever font is being fallen back to is adding the empty circles? If that's the case the fix here would be one of: Try falling back to something like in the font family setting, eg. Support custom glyph rendering for those characters, I really would rather not supporting this unless we absolutely had to though.
This bug is still present in Version: 1.84.2/macOS 14. I tried using Symbola, SF Mono, Menlo and Monaco as the main fonts, without success.
I double checked today and it looks like Chrome Version 127.0.6533.89 renders Braille characters without hollow circles on MacOS. <img width="952" alt="Screenshot 2024-08-02 at 10 50 29" src=""(I have a macOS app that's rendering the top bar differently)
So... I spent a bit too long today investigating what was happening here and here's how I've resolved this issue for myself: Before / After <img width="163" alt="Screenshot 2024-08-07 at 22 22 32" src=""<img width="163" alt="Screenshot 2024-08-07 at 22 22 42" src=""In case the diagnostic steps are useful to someone, here's the portion of my search tree that resulted in this solution / bodge.... I looked through my macOS font book for which fonts were providing symbols for (U+2879) and ended up finding "Apple Braille" and "Apple Symbols". "Apple Symbols" had the wrong amount of whitespace when I set that as the fallback font and the "Apple Braille" looked like a drop-in replacement. Turns out, Apple Braille looked different in the OS's Font Book vs in VS Code. The reason for this ended up being that Apple Braille has multiple variants and... for some reason... the version of Chromium being used in VS Code uses either Outline6Dot or Outline8Dot variants by default (these have the hollow/outline circles) instead of the Regular variant which does not have hollow circles. I assume this has to do with the font-renderer-level behaviour. None the less, the of the specific font variant within the "Apple Braille" family that I want to use was "AppleBraille" and adding that to the stack makes it use the correct-for-me variant of the OS-provided Braille symbols!
Alternatively, you can also do what I did recently and change to a font that includes braille characters (like ).
I considered creating an issue for this for the editor as well, but the visualize progress isn't as important there and it's more possible people may want the filled/empty circle rendering in the editor to more easily identify which circles are filled.
This failed the macOS build when merged:

Discussion:
import { ITerminalConfigurationService, LinuxDistro } from './terminal.js'; import type { IXtermCore } from './xterm-private.js'; import { DEFAULT_BOLD_FONT_WEIGHT, DEFAULT_FONT_WEIGHT, DEFAULT_LETTER_SPACING, DEFAULT_LINE_HEIGHT, FontWeight, ITerminalConfiguration, MAXIMUM_FONT_WEIGHT, MINIMUM_FONT_WEIGHT, MINIMUM_LETTER_SPACING, TERMINAL_CONFIG_SECTION, type ITerminalFont } from '../common/terminal.js'; <ins> import { isMacintosh } from '../../../../base/common/platform.js'; </ins> // #region TerminalConfigurationService

// Always fallback to monospace, otherwise a proportional font may become the default fontFamily += ', monospace'; <ins> // Always fallback to AppleBraille on macOS, otherwise braille will render with filled and // empty circles in all 8 positions, instead of just filled circles // See https://github.com/microsoft/vscode/issues/174521 if (isMacintosh) { fontFamily += ', AppleBraille'; } </ins> const letterSpacing = this._terminalConfigurationService.config.letterSpacing ? Math.max(Math.floor(this._terminalConfigurationService.config.letterSpacing), MINIMUM_LETTER_SPACING) : DEFAULT_LETTER_SPACING; const lineHeight = this._terminalConfigurationService.config.lineHeight ? Math.max(this._terminalConfigurationService.config.lineHeight, 1) : DEFAULT_LINE_HEIGHT;

*  Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ <del> import { notStrictEqual, strictEqual } from 'assert'; </del> <ins> import { notStrictEqual, ok, strictEqual } from 'assert'; </ins> import { getActiveWindow } from '../../../../../base/browser/dom.js'; import { mainWindow } from '../../../../../base/browser/window.js'; import { isLinux } from '../../../../../base/common/platform.js';

editor: { fontFamily: 'foo' }, terminal: { integrated: { fontFamily: 'bar' } } }); <del> strictEqual(terminalConfigurationService.getFont(getActiveWindow()).fontFamily, 'bar, monospace', 'terminal.integrated.fontFamily should be selected over editor.fontFamily'); </del> <ins> ok(terminalConfigurationService.getFont(getActiveWindow()).fontFamily.startsWith('bar'), 'terminal.integrated.fontFamily should be selected over editor.fontFamily'); </ins> }); test('fontFamily (Linux Fedora)', () => {

editor: { fontFamily: 'foo' }, terminal: { integrated: { fontFamily: null } } }, LinuxDistro.Fedora); <del> strictEqual(terminalConfigurationService.getFont(getActiveWindow()).fontFamily, ''DejaVu Sans Mono', monospace', 'Fedora should have its font overridden when terminal.integrated.fontFamily not set'); </del> <ins> ok(terminalConfigurationService.getFont(getActiveWindow()).fontFamily.startsWith(''DejaVu Sans Mono''), 'Fedora should have its font overridden when terminal.integrated.fontFamily not set'); </ins> }); test('fontFamily (Linux Ubuntu)', () => {

editor: { fontFamily: 'foo' }, terminal: { integrated: { fontFamily: null } } }, LinuxDistro.Ubuntu); <del> strictEqual(terminalConfigurationService.getFont(getActiveWindow()).fontFamily, ''Ubuntu Mono', monospace', 'Ubuntu should have its font overridden when terminal.integrated.fontFamily not set'); </del> <ins> ok(terminalConfigurationService.getFont(getActiveWindow()).fontFamily.startsWith(''Ubuntu Mono''), 'Ubuntu should have its font overridden when terminal.integrated.fontFamily not set'); </ins> }); test('fontFamily (Linux Unknown)', () => {

editor: { fontFamily: 'foo' }, terminal: { integrated: { fontFamily: null } } }); <del> strictEqual(terminalConfigurationService.getFont(getActiveWindow()).fontFamily, 'foo, monospace', 'editor.fontFamily should be the fallback when terminal.integrated.fontFamily not set'); </del> <ins> ok(terminalConfigurationService.getFont(getActiveWindow()).fontFamily.startsWith('foo'), 'editor.fontFamily should be the fallback when terminal.integrated.fontFamily not set'); </ins> }); test('fontSize 10', () => {