Just for reference bootstrap will not fix this until v5

@Quy
Shall we not also solve this one: https://github.com/joomla/joomla-cms/blob/4.0-dev/templates/cassiopeia/scss/vendor/_chosen.scss#L17 ?

Tested with Safari (not Catalina) and I have the issue.
The issue is solved by this PR

Before

After patch

@Quy
can you correct also
#27798 (comment)

so that we can test OK and merge asap

I can't get it to work for RTL. Will you give it a go?

I can't get it to work for RTL. Will you give it a go?

which page?

The filter section. Switch to RTL and you will see.

IN Safari It works here

There is no arrow on the left in dropdown ie - Select Stage -.

By default there should be an arrow. See 20. There is no indicator that it is a dropdown.

Will look at that. We may have to add a variable.

hmm.
I get the correct svg but it does not work (Safari) for the RTL concerning ordering and list. Works fine in all other browsers here (macintosh)

here is the .diff which also contains the part you did for searchtools.

diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
index 5118244..a48b252 100644
--- a/administrator/templates/atum/scss/_variables.scss
+++ b/administrator/templates/atum/scss/_variables.scss
@@ -214,7 +214,9 @@
 $custom-select-bg-size:              116rem;
 $custom-select-indicator:            url(../images/select-bg.svg);
+$custom-select-indicator-rtl:        url(../images/select-bg-rtl.svg);
 $custom-select-indicator-active:     url(../../../images/select-bg-active.svg);
 $custom-select-indicator-active-rtl: url(../../../images/select-bg-active-rtl.svg);
 $custom-select-background:           $custom-select-indicator no-repeat right center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-background-rtl:       $custom-select-indicator-rtl no-repeat left center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 $custom-select-box-shadow:           $atum-box-shadow;
 $custom-select-bg-size-sm:           75rem;
diff --git a/administrator/templates/atum/scss/system/searchtools/searchtools.scss b/administrator/templates/atum/scss/system/searchtools/searchtools.scss
index 917a382..9bd95d7 100644
--- a/administrator/templates/atum/scss/system/searchtools/searchtools.scss
+++ b/administrator/templates/atum/scss/system/searchtools/searchtools.scss
@@ -88,9 +88,11 @@
       &.active {
         color: var(--white);
-        background: $custom-select-bg $custom-select-indicator-active no-repeat right center;
+        background: $custom-select-indicator-active no-repeat right center;
+        background-color: $custom-select-bg;
         background-size: $custom-select-bg-size;
 
         [dir=rtl] & {
-          background: $custom-select-bg $custom-select-indicator-active-rtl no-repeat left center;
+          background: $custom-select-indicator-active-rtl no-repeat left center;
+          background-color: $custom-select-bg;
         }
       }
diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss b/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
index 8fa402b..a0238f5 100644
--- a/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
+++ b/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
@@ -3,9 +3,11 @@
 .custom-select {
   max-width: $input-max-width;
+  background: $custom-select-background;
+  background-color: $custom-select-bg;
 
   [dir=rtl] & {
     padding: $custom-select-padding-y $custom-select-padding-x $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding);
-    background-position-x: 0%;
-    background-image: url(../images/select-bg-rtl.svg);
+    background: $custom-select-background-rtl;
+    background-color: $custom-select-bg;
   }

@ciar4n
Is it related to center/116rem ?
Help! ?

Probably more left center/116rem which is a bit strange. Try instead...

background-position: left center;
background-size: 116rem;

will test tomorrow, but weird as the same code works for ltr

@infograf768 If solved, please submit PR to this branch or submit a new PR and I will close this one. Thanks.

@Quy It does not work, and only in Safari...

@ciar4n
Your proposal does not work. ?

@infograf768 Maybe breakdown background completely to their separate properties.

Maybe breakdown background completely to their separate properties.

That is what I did with @ciar4n suggestion.
It works perfectly in all browsers.
And breaks only for RTL in Safari here.
The code is working as should in LTR, including Safari.

Mystery or Safari bug.
As we need to test anyway and it is better than nothing, will make a new PR with the .diff above.
Will then close this one as you suggested.

Closing in favor of #27864