[BUG] SVG gets surrounded in a black box

[henryiii]

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.0

PS: 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

[willmcgugan]

Yeah, Safari has a bunch of issues. We think we can work around them.

[github-actions]

Did I solve your problem?

Why not buy the devs a coffee to say thanks?