[BUG] SVG gets surrounded in a black box #2171
Description
Describe the bug
Making an SVG, ideally a light-mode SVG, creates a black box around the terminal with square edges. Ideally, I think, the corners could be rounded to match the terminal application, otherwise, the box should be removed. Or both + a drop shadow, which would look really nice, I think. This is on the terminal div.
(I'm not sure why this only shows the top corner in the GitHub preview, but you still the extra box corner a bit there depending on your GitHub mode. Hey, you can click it and see the whole thing, nice! Thought it does lose some but not all of the styling. Though I'd also really like a way to just display the inner contents too with color inline. Anyway, back to the issue...)
PNG images to illustrate:
Ahhh, this might be a Safari bug. There's a border radius already, but it's not showing up on the the terminal div. Replacing outline with box-shadow: black 5px 5px 10px; does look fantastic, though, and that does follow the curved outline even on Safari.
This seems to be a bug on Safari (tailwindlabs/tailwindcss#7649 and others) that used to be present on other browsers, but now mostly Safari.
Platform
Click to expand
What platform (Win/Linux/Mac) are you running on? What terminal software are you using?
macOS, Safari.
I may ask you to copy and paste the output of the following commands. It may save some time if you do it now.
If you're using Rich in a terminal:
$ python -m rich.diagnose
╭───────────────────────── <class 'rich.console.Console'> ─────────────────────────╮
│ A high level console interface. │
│ │
│ ╭──────────────────────────────────────────────────────────────────────────────╮ │
│ │ <console width=193 ColorSystem.TRUECOLOR> │ │
│ ╰──────────────────────────────────────────────────────────────────────────────╯ │
│ │
│ color_system = 'truecolor' │
│ encoding = 'utf-8' │
│ file = <_io.TextIOWrapper name='<stdout>' mode='w' encoding='utf-8'> │
│ height = 75 │
│ is_alt_screen = False │
│ is_dumb_terminal = False │
│ is_interactive = True │
│ is_jupyter = False │
│ is_terminal = True │
│ legacy_windows = False │
│ no_color = False │
│ options = ConsoleOptions( │
│ size=ConsoleDimensions(width=193, height=75), │
│ legacy_windows=False, │
│ min_width=1, │
│ max_width=193, │
│ is_terminal=True, │
│ encoding='utf-8', │
│ max_height=75, │
│ justify=None, │
│ overflow=None, │
│ no_wrap=False, │
│ highlight=None, │
│ markup=None, │
│ height=None │
│ ) │
│ quiet = False │
│ record = False │
│ safe_box = True │
│ size = ConsoleDimensions(width=193, height=75) │
│ soft_wrap = False │
│ stderr = False │
│ style = None │
│ tab_size = 8 │
│ width = 193 │
╰──────────────────────────────────────────────────────────────────────────────────╯
╭─── <class 'rich._windows.WindowsConsoleFeatures'> ────╮
│ Windows features available. │
│ │
│ ╭───────────────────────────────────────────────────╮ │
│ │ WindowsConsoleFeatures(vt=False, truecolor=False) │ │
│ ╰───────────────────────────────────────────────────╯ │
│ │
│ truecolor = False │
│ vt = False │
╰───────────────────────────────────────────────────────╯
╭────── Environment Variables ───────╮
│ { │
│ 'TERM': 'xterm-256color', │
│ 'COLORTERM': 'truecolor', │
│ 'CLICOLOR': None, │
│ 'NO_COLOR': None, │
│ 'TERM_PROGRAM': 'iTerm.app', │
│ 'COLUMNS': None, │
│ 'LINES': None, │
│ 'JPY_PARENT_PID': None, │
│ 'VSCODE_VERBOSE_LOGGING': None │
│ } │
╰────────────────────────────────────╯
platform="Darwin"
$ pip freeze | grep rich
rich==12.2.0PS: it was really trivial to add this to my app, and is amazing, love the feature! Don't want to sound negative opening an issue. :D