I can’t reproduce this.

Can someone else with a Mac please confirm or deny this please

Info: My test was done with macOS 10.12.6 and Safari 12.1.2, therefore not the exact conditions of original poster.

I managed to install catalina on an older mac(macOS 10.15.2 Safari 13.0.4) and l confirm the issue with Safari ! It can already be seen at install time. Setting as release blocker.

Mofified title for better info

This issue seems to appear because the select-bg.svg background image isn't rooted properly by Safari (see the screenshot).

Could one of you test modifying the css in template.css (if you do not use npm) after setting debug system on?
Line 3194
Add quotes in order to have
background: var(--atum-bg-dark) url('../images/select-bg.svg') no-repeat right center/116rem;

Nope

I can confirm the issue but I'm having a hard time navigating in developer. I don't believe the issue is the background image. I believe it's the way the input(s) are contained.
Why are these control-groups(s) instead of input-group(s) ?

Safari is referencing the image in the root directory and not relative to the administration images directory. Could this be a Safari bug? It is fine using Firefox.

@Quy i wonder if this has to do with the fact that osx uses a different dir separator. Which is why we created the clean function.

No because it works in Firefox but not in Safari on the same machine.

@C-Lodder @ciar4n Do you know why Safari and Microsoft Edge load images in the root directory and not relative to the atum directory in these css files?

http://localhost/joomla-cms-4.0-dev/administrator/templates/atum/css/template.css

background: var(--atum-bg-dark) url(../images/select-bg.svg) no-repeat right center/116rem;

http://localhost/joomla-cms-4.0-dev/administrator/templates/atum/css/system/searchtools/searchtools.css

background: var(--atum-bg-dark) url(../../../images/select-bg-active.svg) no-repeat right center;

http://localhost/joomla-cms-4.0-dev/images/select-bg.svg
http://localhost/images/select-bg-active.svg

A temporary solution is to copy these images to the images directory in the root.

The URL to the image looks fine. I think the issue is how the CSS property is been defined. Edge can have trouble with vars inside shorthand properties like background

Try defining the properties separately.

background-image: url("../images/select-bg.svg");
background-color: var(--atum-bg-dark) ;
background-repeat: no-repeat;
background-position: center/116rem;

Macintosh Microsoft edge: I have no issue here.

@Quy It depends on what version of Edge is being used. v15 only has partial support for CSS variables, so if this version is being used, I assume that's the issue. Else try compiling the CSS but without minifying it.

@ciar4n @C-Lodder Thanks for the hint. The fix is to declare color on its own.

Change

background: $custom-select-bg $custom-select-background;

to

  background: $custom-select-background;
  background-color: $custom-select-bg;

This line is in the following files:

\media\vendor\bootstrap\scss\_custom-forms.scss
\node_modules\bootstrap\scss\_custom-forms.scss

Should this be fixed upstream or be overridden in a custom file?

Looks like it is a bit more complex:
We should not forget that we have also the rtl equivalent, therefore it concerns 4 files.

select-bg-active-rtl.svg
select-bg-active.svg
select-bg-rtl.svg
select-bg.svg

Also we have specific variables for atum

$custom-select-indicator:            url(../images/select-bg.svg);
$custom-select-indicator-active:     url(../../../images/select-bg-active.svg);
$custom-select-indicator-active-rtl: url(../../../images/select-bg-active-rtl.svg);

(Where we should also add imho $custom-select-indicator-rtl: url(../images/select-bg-rtl.svg); and use accordingly.)

For example, the variable $custom-select-indicator is used in searchtools.scss and cassiopea _chosen.scss.

Also, we do import in the Installation template
@import "../../../administrator/templates/atum/scss/vendor/bootstrap/custom-forms";
which uses background-image: url(../images/select-bg-rtl.svg); => this should be tested in Safari catalina although my guess is that that part works fine.

Partial fix #27798. The remaining fix will be upstream at Bootstrap.

Please look at #27864
Still a .svg issue in RTL for Safari.